无法从父结构指令访问子结构指令

Question

我正在尝试从父指令访问子结构指令。

这就是我试图访问孩子的方式

@Directive({
  selector: '[appChildStruralDirective]'
})
export class ChildStruralDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private renderer: Renderer) {
    this.viewContainer.createEmbeddedView(this.templateRef);
  }

  ngAfterViewInit(): void {
  }
}

@Directive({
  selector: '[appParentStruralDirective]'
})
export class ParentStruralDirective {
  @ViewChild(ChildStruralDirective) viewChild: ChildStruralDirective;
  @ContentChild(ChildStruralDirective) contentChild: ChildStruralDirective;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private renderer: Renderer) {
    this.viewContainer.createEmbeddedView(this.templateRef);
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit:viewChild', this.viewChild);
    console.log('ngAfterViewInit:contentChild', this.contentChild);
  }

  ngAfterContentChecked(): void {
    console.log('ngAfterContentChecked:viewChild', this.viewChild);
    console.log('ngAfterContentChecked:contentChild', this.contentChild);
  }
}
@Component({
  selector: 'my-app',
  template: `
   <h1 *appParentStruralDirective>
     <span *appChildStruralDirective>Hello world</span>
   </h1>
  `,
})
export class App {
  constructor() {
  }
}

我不确定为什么子指令不可访问。

我创建了一个 plunkr 来演示这个问题。

https://plnkr.co/edit/deQC6cY4oHuNdKbzsfhE?p=preview

请告诉我为什么这不起作用。

PS：我同时使用了 ViewChild 和 ContentChild（很可能是候选），因为我不确定这属于哪一个，因为它们是动态生成的元素。

Answer 1

您可以为每个父子组合创建一个服务。

这里是 plunker：https://plnkr.co/edit/zNf7iZtOQtlsSfYOfq5D?p=preview

  @Injectable()
  export class MyState{
    id;
    child;
  }

  @Directive({
    selector: '[appChildStruralDirective]'
  })
  export class ChildStruralDirective {
    random;

    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private myState : MyState) {
      this.viewContainer.createEmbeddedView(this.templateRef);
     this.myState.child = this;
     this.random = Math.random();
    }

    ngAfterViewInit(): void {
    }
  }

  @Directive({
    selector: '[appParentStruralDirective]'
  })
  export class ParentStruralDirective {
    child;

    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private renderer: Renderer,
    private s : MyState) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

  @Component({
    selector: 'my-comp',
    providers: [MyState],
    template: `
    <fieldset style="margin-top:50px">
       <button (click)="showMyState()">Show My State</button>
       <h1 *appParentStruralDirective>
         <span *appChildStruralDirective>Hello world {{id}}</span>
       </h1>
     </fieldset>
    `,
  })
  export class MyCmp {
    @Input() id: string;
    constructor(private myState: MyState) {
    }

    ngOnInit(){
      this.myState.id=this.id;
    }

    showMyState() {
      console.log(this.myState);
    }
  }

  @Component({
    selector: 'my-app',
    template: `
        <my-comp [id]="'one'"></my-comp>
        <my-comp [id]="'two'"></my-comp>
    `,
  })
  export class App {
    constructor() {
    }
  }