如何从Angular 4中的子组件访问另一个子组件

时间:2017-07-18 15:01:06

标签: angular angular-components

我有一个父组件,里面有两个不同的子组件。 当我单击第一个子组件中的链接时,我需要从第一个子组件调用第二个子组件的函数。

所以这是一个更好地解释的基本图表:

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以通过ViewChildOutput

来实现这一目标

例如:

@Component({
  template: '
     <child-one (clicked)="handleClick()"></child-one>
     <child-two></child-two>
  '
})
export class ParentComponent {
   @ViewChild(ChildOneComponent)
   childOne: ChildOneComponent;

   handleClick(){
    this.childOne.doSomething();
   }
}

在这种情况下:

  • clickedOuput
  • ChildOneComponent属性
  • doSomething是一种公共方法

另一种方法只使用Output和模板变量

@Component({
      template: '
         <child-one (clicked)="childTwo.doSomething()"></child-one>
         <child-two #childTwo></child-two>
      '
    })
    export class ParentComponent {

    }