我试图在从父组件接收数据后显示子组件。 我已经采取了这个步骤:
将数据从父级发送到子组件Show(text: string)
方法:
private text: string;
Show (text: string){
this.text = text;
}
之后我在我的子组件中为div插入*ngIf="text"
,仅在我的组件收到它时显示数据。
但是当我调用我的子组件的show方法时,text
变量为空,而我的子组件没有显示。我认为这是因为我的父html页面中的子组件选择器创建了一个新的对象实例,其值为text
。我怎么能解决这个问题?
已更新
我正在尝试使用@Input。它正在发挥作用。但是为字符串工作。我如何向输入发送一些类实例?
答案 0 :(得分: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
!