javascript - Angular——一种未记录的 child 与 parent 之间的交流？

Question

看完这篇section about component interaction — 我注意到还有另一种从 child 到 parent 的沟通方式(那里没有真正记录):

事实证明，如果我有一个父类:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-item></my-item>
    </div>
  `,
})
export class App {
  name:string;
  go1()
   {
     alert(2)
   }
  constructor() {}
}

然后在子组件中 - 我将 parent 类型注入(inject)到 ctor 中:

@Component({
  selector: 'my-item',
  template: `
    <div>
     <input type="button" value='invoke parent method' (click) = "myGo()"/>
    </div>
  `,
})
  class MyItem {
  name:string;
  private parent1 : App; 

  myGo()
  {
    this.parent1.go1()    //<--- access is available here
  } 

  constructor(private parent1 : App) 
   {
    this.parent1 = parent1; //<------------ manually, unlike service
    this.name = `Angular! v${VERSION.full}`
   }
}

然后 Angular 发现我正在尝试注入(inject)一个父类型类，它允许我访问它。

点击当然有效。

问题:

除了我已经知道的其他备选方案之外，是否在任何地方记录了它？或者它只是一个我不能依赖的功能

plnkr

Answer 1

这个很好用，可以用。

一个主要的缺点是它破坏了封装。子组件需要了解父组件。这种方法使子组件与其父组件紧密耦合，这通常被认为是一件坏事，因为它阻止了组件在您的应用程序中的任何地方重复使用，因为它现在仅作为该确切父组件的子组件工作。