如何通过@Input（）将父组件传递给Angular 7中的子组件答案

【问题标题】：How do I pass parent component into child component in Angular 7 via @Input()如何通过@Input（）将父组件传递给Angular 7中的子组件
【发布时间】：2019-03-14 14:58:35
【问题描述】：

使用 Angular 7，

我有一个组件，它有一个输入属性，它是一个对象，它会询问一些信息。

<app-details [item]="whatGoeHere" key="firstName"></app-details>

在组件中，我有一个像这样的输入属性......

export class DetailsComponent implements OnInit{

    @Input() item: any;
    @Input() key: string;

    ngInit(){
      if(this.item && this.item.isYummy){
       ....
      }
    }
    ...
}

当我要传入的对象是父组件的某个属性时，我只需在父组件上提供一个属性名称，一切都很好。

但是，如果我想传入父组件实例本身而不是它的属性之一怎么办？怎么办？

在某些情况下，它不是父组件实例，而是它的属性之一，所以我希望能够在绑定中指定而不是总是引用父组件。

在 KnockoutJs 中，我可以使用 $data, $root 来引用绑定上下文。 Angular中有类似的概念吗？

【问题讨论】：

ngAfterViewChecked 生命周期钩子

标签： angular

【解决方案1】：

在宿主的html里面

<app-details [item]="whatGoeHere" key="firstName" [context]="this"></app-details>

并在组件内部定义输入属性

export class DetailsComponent implements OnInit{

    @Input() item: any;
    @Input() key: string;
    @Input() context;

    ngInit(){
      if(this.item && this.item.isYummy){
       ....
      }
    }
    ...
}

【讨论】：

这个！现在很明显，正是我需要的。我假设有一些奇怪的角度语法。
很高兴我能帮上忙。 :)

【解决方案2】：

为什么要传递整个父组件？你打算如何处理孩子内心的父母？

我的第一反应是：您不应该将整个父级传递给一个子级，因为您最终会得到 2 个紧密耦合的组件。

您可以查看Angular's docs，了解如何使您的组件交互，您将在其中看到以下替代方案以及更多信息。

让父级监听子事件

将一个函数从父级传递给子级。孩子可以调用该函数与父母交谈：

<app-details (myCallback)="parentFunction()" key="firstName"></app-details>;

Angular 的文档是 here

实现父母与孩子之间的双向交流

如果您想要双向通信，请使用服务。您可以从孩子更改服务中的数据，并让父母订阅更改。父级也可以使用其他方法将更改发送到服务，您也可以让子级订阅这些更改。

Angular 的文档是 here

【讨论】：

注意将父母传递给孩子的大红旗。原因是在这种情况下，父组件恰好实现了一个接口，子组件将调用该接口的某些成员。在其他情况下，它不会是父组件。
您能否将各个成员作为输出传递给子组件？

【解决方案3】：

将父组件的上下文作为输入传递给子组件。

我已经创建了 stackblitz 答案。看看这个...

pass parent component to child

【讨论】：