主页 / coding / 问题 / 79281951
Accepted
Konrad Viltersten
Asked: 2024-12-15 15:14:36 +0800 CST

无法修改 ViewContainerRef 的内部内容，只能在 Angular 中在其后添加标签

  • 772

我有几个 DIV 可能标有指令special。该指令具有某些有效的逻辑。现在，我想在配备该指令的 DIV中添加一个组件。

<div special ...>Monkey</div>
<div regular ...>Donkey</div>

按照有关使用 ViewContainerRef的文档（由对类似问题的答案建议），我在我的指令中运行以下命令。

@Directive({ selector: "[special]" })
export class SpecialDirective {

  private viewRef = inject(ViewContainerRef); ...
  constructor() {
    const icon = this.viewRef.createComponent(IconComponent);
  }

它的工作原理与文档中描述的一样：创建的图标（对应于LeafContent）放置在 DOM 中标记为特殊的 DIV（对应于InnerItem）之后。这正是我的问题：我希望图标成为受指令控制的 DIV 内部 HTML 的一部分。

由于各种与其逻辑相关的原因，我无法将指令向内移动。我尝试访问viewRef.element并检查了它的其他字段和方法。但无济于事。在创建时设置索引没有帮助。我最接近的方法是分离/插入文档，但它只允许我管理DIV之后元素的顺序，而不是其中的元素顺序。

我已经看到了这个答案，但是它对我的情况没有帮助，因为在用户单击 DIV 之后发生了改变，而 DIV 已经创建并放置在视图中。

我该如何改变实例的内部viewRef？除了修改图标之外，我最好也删除其中的一些标签。

html

1 个回答

  1. Best Answer

    由于您想要插入没有创建任何子元素的组件，我们可以使用createComponent独立方法，它接受环境注入器的输入，并且我们可以使用appendChild将Renderer2这个创建的元素附加到原始元素elementRef。

    export class InnerItem {
  constructor(
    private viewContainer: ViewContainerRef,
    private injector: Injector,
    private element: ElementRef,
    private envInjector: EnvironmentInjector,
    private renderer: Renderer2
  ) {}
  loadContent() {
    const componentRef = createComponent(LeafContent, {
      environmentInjector: this.envInjector,
    });
    this.renderer.appendChild(
      this.element.nativeElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}

    完整代码：

    import {
  Component,
  createComponent,
  ViewContainerRef,
  Injector,
  ElementRef,
  EnvironmentInjector,
  Renderer2,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'leaf-content',
  template: `
    <div>This is the leaf content</div>
  `,
})
export class LeafContent {}
@Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
  `,
})
export class InnerItem {
  constructor(
    private viewContainer: ViewContainerRef,
    private injector: Injector,
    private element: ElementRef,
    private envInjector: EnvironmentInjector,
    private renderer: Renderer2
  ) {}
  loadContent() {
    const componentRef = createComponent(LeafContent, {
      environmentInjector: this.envInjector,
    });
    this.renderer.appendChild(
      this.element.nativeElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}
@Component({
  selector: 'outer-container',
  imports: [InnerItem],
  template: `
    <p>This is the start of the outer container</p>
    <inner-item />
    <p>This is the end of the outer container</p>
  `,
})
export class OuterContainer {}

@Component({
  selector: 'app-root',
  imports: [OuterContainer],
  template: `
    <outer-container/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

    Stackblitz 演示

    您可以创建一个template reference variable #insertHere来明确指定在何处插入新组件，我们可以使用viewChild并指定read属性来获取ViewContainerRef具有该方法的createComponent。

    @Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
    <ng-container #insertHere></ng-container>
  `,
})
export class InnerItem {
  insertHere = viewChild('insertHere', {
    read: ViewContainerRef,
  });
  loadContent() {
    this.insertHere()?.createComponent(LeafContent);
  }
}

    完整代码：

    import { Component, viewChild, ViewContainerRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'leaf-content',
  template: `
    This is the leaf content
  `,
})
export class LeafContent {}
@Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
    <ng-container #insertHere></ng-container>
  `,
})
export class InnerItem {
  insertHere = viewChild('insertHere', {
    read: ViewContainerRef,
  });
  loadContent() {
    this.insertHere()?.createComponent(LeafContent);
  }
}
@Component({
  selector: 'outer-container',
  imports: [InnerItem],
  template: `
    <p>This is the start of the outer container</p>
    <inner-item />
    <p>This is the end of the outer container</p>
  `,
})
export class OuterContainer {}

@Component({
  selector: 'app-root',
  imports: [OuterContainer],
  template: `
    <outer-container/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

    Stackblitz 演示

    • 1

相关问题