親構造ディレクティブから子構造ディレクティブにアクセスできない

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