接收到数据角度2后显示组件

时间:2017-09-06 14:14:18

标签: javascript angular

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

  1. 我在父html页面中声明了组件选择器。
  2. 将数据从父级发送到子组件Show(text: string)方法:

    private text: string;
    Show (text: string){
        this.text = text;
    }     
    
  3. 之后我在我的子组件中为div插入*ngIf="text",仅在我的组件收到它时显示数据。

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

    已更新

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

1 个答案:

答案 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