Angular - 如何获取嵌套组件引用？

Question

我正在使用 Angular 5.2.2，我想知道是否可以找到后代组件 (嵌套深度 2+) .

例如:

一级组件 (在我的申请中声明)

二级组件 (第三方组件)

三级组件 (第三方组件)

FirstLevelComponent 模板 :

<first-level-component>
   <second-level-component></second-level-component>
</first-level-component>

SecondLevelComponent 模板 :

<third-level-component></third-level-component>

我想在 FirstLevelComponent 中获取 ThirdLevelComponent 实例。

我试过使用@ViewChildren 和@ContentChildren，但没有成功。两者都返回一个空的 QueryList。

我无法更改 SecondLevelComponent 公开 ThirdLevelComponent 的代码，因为它是第三方组件。

这个 plunker 演示了我正在尝试做的事情: https://plnkr.co/edit/9NsYmrsJMJEi0wofQReI?p=preview

编辑 (2018/02/06)

一种选择可能是继承 SecondLevelComponent 来公开 ThirdLevelComponent，但我不想使用继承，它会被限制在一个深度级别。

经过一番检查，我最终创建了一个帮助程序来搜索后代组件。它使用 ViewContainerRef:

  import * as NgCore from '@angular/core';

@NgCore.Injectable()
export class FindDescendantsService {
    constructor() { }
    private findRecursive(container: any, type: any, results: any[]) {
        if (!container) { return; }
        if ('nodes' in container) {
            container.nodes.forEach(n => {
                if ('componentView' in n && n.componentView) {
                    if (n.componentView.component instanceof type) {
                        results.push(n.componentView.component);
                    }
                    this.findRecursive(n.componentView, type, results);
                    return;
                }

                if ('viewContainer' in n && n.viewContainer && n.viewContainer._embeddedViews && n.viewContainer._embeddedViews.length) {
                    n.viewContainer._embeddedViews.forEach(v => this.findRecursive(v, type, results));
                    return;
                }
            });
        }
    }
    find(vcr: NgCore.ViewContainerRef, type: any) {
        var view = vcr['_view'];
        var results = [];
        this.findRecursive(view, type, results);
        return results;
    }
}

然后在 FirstLevelComponent 我可以做:

ngAfterContentInit(){    
   var thirdLevelInstances = this.findDescendantsService.find(this.viewContainerRef, ThirdLevelComponent);
}

我不太舒服，因为它使用了一些私有(private)变量，这些变量可能会在 future 的 Angular 版本中改变名称/行为，但这满足了我现在的目标。我会等一段时间看看是否有更好的解决方案出现，如果没有，我认为这个助手可能是答案......

Answer 1

为了做到这一点，second component应该有 third component 的实例.例如。

// First Component
@Component({
    selector: 'first-comp',
    template: `<second-comp></second-comp>`
})
export class FirstComponent {
    @ViewChild(SecondComponent) secondComponent: SecondComponent;

    doSomething() {
         this.secondComponent.thirdComponent.doStuff();
    }
}

// Second Component
@Component({
    selector: 'second-comp',
    template: `<third-comp></third-comp>`
})
export class SecondComponent{
    @ViewChild(ThirdComponent) thirdComponent: ThirdComponent;
}  

// Third Component
@Component({
    selector: 'third-comp',
    template: `<div>Hello World</div>`
})
export class ThirdComponent{
    doStuff() {
       // some logic here
    }
}    

但是，我不会推荐这种方法。这会创建紧密耦合的组件，也更难测试。您应该始终通过 @Input 传递数据和 @Output s或一些服务。