angular - angular 8 - 从父组件获取子组件的实例

Question

我有一个组件层次结构如下。

Parent Component A 
  -> Child Component B (child of component A)
      -> Child component C (child of component B)

我们如何从间接父组件 A 中获取对组件 c 的引用？我尝试使用视图子项从父项访问子组件 C，但未定义。

注意：子组件来自一些第三方库。我无法更改这些文件

stackblitz.com/edit/angular-bpmwxz

Answer 1

您可以通过链式引用解决此问题。

Parent Component A { 
      holds the reference of Chil Component B;
      calls the ChildB.function();
}
    -> Child Component B { 
          holds the reference of Child Component C <-- hope this is the library component
          calls the ChildC.function();
        }
          -> Child component C {
            function();
          }

代码示例

export class AppComponent {
  name = 'Angular';

  @ViewChild(SampleOneComponent)
  sampleOne: SampleOneComponent;


  getInstanceOfChild() {
    this.sampleOne.getInstanceOfChild();
  }
}

export class SampleOneComponent implements OnInit {

 @ViewChild(SampleTwoComponent)
  sampleOne: SampleTwoComponent;
  constructor() { }

  ngOnInit() {
  }

  getInstanceOfChild() {
    this.sampleOne.libFn();
  }

}

export class SampleTwoComponent implements OnInit {
  title: string = "yeahhh";
  constructor() { }

  ngOnInit() {
  }

  libFn() {
    console.log('Im in sample two');
  }

}

Stackblitz 网址与 chagnes https://stackblitz.com/edit/angular-jnhc5v

Answer 2

@ViewChild将工作。不过，我们不知道这是如何组织的，也不知道组件 B 的模板是如何工作的，所以如果组件 B 使用模板指令，则必须@ViewChild(ComponentCTypeToken)使用模板变量而不是模板变量。

然而，由于我们不知道组件 B 是如何渲染模板的（或者这些组件是如何使用的），如果组件 C 嵌套在组件 A 的模板中的组件 B 中，那么组件 B 很有可能通过内容投影渲染自己的模板; 在这种情况下，它需要是 a @ContentChild。