Angular-动态引用子组件

Question

Giving the following structure:

root:

<parent>
    <child>1st child content</child>
    <child>2nd child content</child>
</parent>

parent.html:

<ng-container *ngTemplateOutlet="children[currentChildIndex]"></ng-container><br/>

parent.ts:

export class ParentComponent implements OnInit {
  @ContentChildren(ChildComponent, { read: TemplateRef })
  set childrenQueryList(val: QueryList<ChildComponent>) {
    this.children = val.toArray();
  }
  children;
  currentChildIndex = 0

child.html:

<ng-content></ng-content>

child.ts:

public foo() {
    alert(`foo`)
  }

when I'm trying to call a child method from the parent like:

this.children[0].foo()

I'm getting

Cannot read property 'foo' of undefined

and, of course, the children aren't showing.

Not working example

Answer 1

Apparently, you have to use ng-template and then show the template in the view.

Change child.html to have a template:

<ng-template><ng-content></ng-content></ng-template>

in child.ts add:

@ViewChild(TemplateRef) content: TemplateRef<any>;

in parent.html change to:

*ngTemplateOutlet="children[currentChildIndex].content"