Question

我有这个简单的组件：

export class AppComponent implements AfterViewInit {
  constructor(private vc: ViewContainerRef) {}

  ngAfterViewInit(): void {
     this.vc.lenght; // 0
  }

template：

<h1>Hello {{name}}</h1>
<green></green>

所以在这里，我明确地在green ViewContainerRef内的AppComponent组件中创建了主机视图。为什么lenght等于0呢？

Answer 1

您在ViewContainerRef构造函数中注入的AppComponent不是AppComponent子组件/视图元素的容器。它实际上属于父组件，因此是父组件子嵌入视图的容器。由于父组件没有嵌入视图，因此其长度为0。但如果父组件具有嵌入视图，您将看到其他编号。

这是一个例子。父AppComponent创建嵌入式视图并使用a-comp元素，AComponent的主机元素作为视图容器：

@Component({
    ...
    template: `
        <h2>Hello {{name}}</h2>
        <ng-template #t>I am embedded view</ng-template>
        <a-comp></a-comp>
    `
})
export class AppComponent {
    name = `Angular! v${VERSION.full}`;
    @ViewChild(AComponent, {read: ViewContainerRef}) acomp;
    @ViewChild('t', {read: TemplateRef}) t;

    constructor() {}

    ngOnInit() {
        this.acomp.createEmbeddedView(this.t);
    }
}

现在，如果您将ViewContainerRef注入AComponent，您将获得length 1：

export class AComponent {
    name = 'A component';

    constructor(private vc: ViewContainerRef) {}

    ngAfterViewInit() {
        console.log(this.vc.length); // 1
    }
}

为什么ViewContainerRef的长度为0，即使其中包含其他组件

1 个答案: