收到数据后显示组件 angular 2答案

【问题标题】：Show component after receiving the data angular 2收到数据后显示组件 angular 2
【发布时间】：2017-09-06 14:14:17
【问题描述】：

我试图在从父组件接收数据后显示子组件。我已经做了这个步骤：

将数据从父组件发送到子组件Show(text: string)方法：

private text: string;
Show (text: string){
    this.text = text;
}

但是当我调用子组件的 show 方法时，text 变量为空，并且我的子组件不显示。我认为这是因为我的父 html 页面中的子组件选择器创建了一个新的对象实例，它有一个空的 text 值。我怎么能解决这个问题？

更新

我正在尝试使用@Input。它正在工作。但是为字符串工作。我如何向输入发送一些类实例？

【问题讨论】：

从父级向子级发送数据应该使用@Input 而不是使用方法
在模板中：[text]="text 在子中：@Input text: string;
你可以在你的组件中添加一个布尔值isLoaded，初始化false，使用*ngIf这个布尔值，然后在你做this.text = text之后将它设置为true
证明问题的 plunkr 会很有帮助

【解决方案1】：

父 HTML 示例（仅需要的部分）：

<your-child-selector [text]="parentText"></your-child-selector>

[text]-"parentText" 会将 parentText 变量值从父变量传递给子变量 text。

在子组件中，您应该使用@Input 从父组件接收数据，如下所示：

@Input text: string;

如果您不想在子组件中显示任何内容，而它没有收到text，您可以添加*ngIf 来隐藏（排除）DOM 的一部分。像这样的东西（在子组件中）：

这个*ngIf 不会显示任何内容，而子组件不会从父组件接收text 变量（使用@Input）。

P.S：别忘了在你的子组件中导入Input！

【讨论】：