ViewChild/ContentChildを使用してディレクティブからディレクティブを見つける方法は？

Question

私はコンポーネントcompを持っています。指示はfindTargetです。

<comp findTarget> 
</comp> 

comp

は targetディレクティブを持つ要素を保持している：

@Component({ 
    selector: 'comp', 
    template: ` 
    <div target> 
     Target 
    </div> 
    `, 
    directives: [Target] 
}) 

私は findTargetディレクティブ内から targetディレクティブを見つけたい

：

@Directive({ 
    selector: '[findTarget]' 
}) 
export class FindTarget { 
    @ContentChild(Target) ctarget: Target; 
    @ViewChild(Target) vtarget: Target; 

    ngAfterContentInit() { 
    console.log('Content', this.ctarget) 
    } 

    ngAfterViewInit() { 
    console.log('View', this.vtarget) 
    } 
} 

が、私は

Content undefined 
View undefined 

を取得

全コード： http://plnkr.co/edit/kc6q445iT1TcLqexqqAg?p=preview

更新： http://plnkr.co/edit/3MQj2Dv8tK036EL8GU8f?p=preview が、私は望んでいないものをということ： ContentChildが、私はそのテンプレートにcomp要素からtargetを移動した場合に動作するようです。

Answer 1

ディレクティブにテンプレートがないため、ViewChildを直接取得することはできません。

あなたはこのように親の参照を使用しようとすることができます：

@Directive({ 
    selector: '[target]' 
}) 
export class Target {} 

@Directive({ 
    selector: '[findTarget]' 
}) 
export class FindTarget { 
    constructor(@Inject(forwardRef(() => App)) private app: App) {} 

    ngAfterViewInit() { 
    console.log('View', this.app.vComp.vtarget) 
    } 
} 

@Component({ 
    selector: 'comp', 
    template: ` 
    <div target> 
     Target 
    </div> 
    `, 
    directives: [Target] 
}) 
export class Comp { 
    @ViewChild(Target) vtarget: Target; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <comp findTarget> 
    </comp> 
    `, 
    directives: [Comp, FindTarget] 
}) 
export class App { 
    @ViewChild(Comp) vComp: Comp; 
} 

plunker