Question

我有一个结构指令A嵌套在另一个结构指令B中。现在，我想访问A内部的B以使用其templateRef。

我尝试使用ContentChild，但始终未定义。有人可以告诉我要更改权限才能访问吗？

我在StackBlitz中重新创建了星座：https://stackblitz.com/edit/angular-b697ct?file=src%2Fapp%2Fhello.component.ts

指令定义：


@Directive({selector: '[testChild]'})
export class B {

}

@Directive({selector: '[testParent]'})
export class A {
  @ContentChild(B, {static: false}) contentTemplate: B;

  constructor(public viewContainer: ViewContainerRef, public templateRef: TemplateRef<any>) {
  }

  ngAfterViewInit() {
    console.log(this.contentTemplate); // logs undefined
  }
}

@Directive({selector: '[tstOutlet]'})
export class TestOutlet {
  constructor(public viewContainer: ViewContainerRef) {
  }
}

@Component({
  selector: 'tst',
  template: `<ng-container tstOutlet></ng-container>`,
})
export class HelloComponent implements AfterViewInit {
  @ContentChildren(A) parents: QueryList<A>;

  @ViewChild(TestOutlet, {static: true}) outlet: TestOutlet;

  ngAfterViewInit() {
    this.parents.toArray().forEach((parent: A) => {
      this.outlet.viewContainer.createEmbeddedView(parent.templateRef);
    });
  }
}

模板定义：

<tst>
  <ng-container *testParent>
    <span *testChild>Test</span>
  </ng-container>

  <ng-container *testParent>
    <span *testChild>Second Test</span>
  </ng-container>
</tst>

嵌套Angular结构指令的ContentChild未定义

0 个答案: