Question

阅读完section about component interaction后 - 我注意到还有另一种从孩子到父母的沟通方式（那里没有真正记录）：

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

@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类型注入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发现我正在尝试注入一个父类型类，它让我可以访问它。

点击工作当然。

问题：

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

plnkr

Answer 1

效果很好，可以使用。

一个主要的缺点是，它破坏了封装。子组件需要知道父组件。这种方法使得孩子与父母紧密耦合，这通常被认为是一件坏事，因为它会阻止组件在你的应用程序中的任何地方重复使用，因为它现在只能作为这个确切父母的孩子。

Angular - 一种无证的儿童与父母之间的沟通？

1 个答案: