Question

使用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中有类似的概念吗？

Answer 1

在主机的html中

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

并在组件内部定义input属性

export class DetailsComponent implements OnInit{

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

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

Answer 2

为什么要传递整个父级组件？您打算与孩子内部的父母做什么？

我的第一个反应是：您不希望将整个父母带给孩子，因为您最终会得到2个紧密耦合的组件。

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

让父母听孩子的事件

将函数从父级传递给子级。子级可以调用该函数与父级对话：

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

Angular的文档为here

在父母与孩子之间进行双向通信

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

Angular的文档为here

Answer 3

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

我创建了stackblitz答案。检查一下...

pass parent component to child

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

3 个答案:

让父母听孩子的事件

在父母与孩子之间进行双向通信