如何使用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

更新： ContentChild似乎如果我搬到target從comp元素插入其模板的工作： http://plnkr.co/edit/3MQj2Dv8tK036EL8GU8f?p=preview 但這不是我想要的。

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