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

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

您可以为每个组合Parent-Child创建一项服务。

这里是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() { 
    } 
    }