javascript - ViewContainerRef & createEmbeddedView 澄清？

Question

我有一个组件:

@Component({
  selector: 'vcrdi',
  template: `
    <template #tpl>
       <h1>ViewContainerRef DI</h1>
    </template>

  `,
})
export class VcrDIComponent {
  @ViewChild('tpl') tpl;

  constructor(private _vcr: ViewContainerRef) {console.log(_vcr)}

  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }
}

该组件在主 my-app 元素中用作:

@Component({
  selector: 'my-app',
  template: `
        <vcrdi></vcrdi>
  `,
})

vcrdi 组件的 Ctor 注入(inject)了 _vcr: ViewContainerRef，所以现在容器是实际的 <vcrdi>...</vcrdi> 元素。

这是渲染的 DOM:



请注意，在 h1(即 ViewContainerRef 元素)之后插入了 vcrdi
让我们转到 docs :

createEmbeddedView(templateRef: TemplateRef<C>, context?: C, index?:
number) : EmbeddedViewRef<C>
Instantiates an Embedded View based on the templateRef and inserts it into this container at the specified index.

If index is not specified, the new View will be inserted as the last View in the container.

好吧，如果 vcrdi 是容器 ref ，那么我没有看到任何注入(inject)其中的东西:

<vcrdi>
   // If vcrdi ^  is the container  , then why does this section  empty ?
</vcrdi>

问题:

文档指出某些东西被注入(inject)到容器中。
但是，如果 vcrdi 是容器，并且我们看到没有注入(inject)任何内容 - 但附加了 - 那么 - 我在这里缺少什么？

Demo PLNKER

Answer 1

对于vcrdi组件， View 容器是 <my-app></my-app> .

说明及举例:https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682