了解@input - 从父母到孩子

Question

我尝试学习 Angular，现在我处于 @Input 阶段。

我有一个主应用程序和一个子组件。在app.component.ts 我有一个测试变量。我想将此变量从app.component.ts 传递给child.component.ts。

// app.component.ts:
export class AppComponent {
    test = 10;
}  

// child.component.ts:
export class ChildComponent {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    show() {
        console.log(this.childVar);
    } //this should to show 15 in console...
}

现在，我该怎么做？

Answer 1

只需将属性放在 app.component.html 中的 子选择器 上，如下所示 -

<!-- replace element selector with yours -->
<app-child [fromParent]="test"></app-child>

并且您可以可选地在您的 child.component.ts 中实现 OnChanges 接口，这样它就会 -

export class ChildComponent implements OnChanges {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    ngOnChanges() { // this will be called automatically when updated by parent.
        console.log(this.childVar);
    }

    show() { // called on demand
        console.log(this.childVar);
    }
}

Answer 2

每当你放置一个子组件时，你都会初始化它的变量。所以，在父模板的某个地方你可以这样做：

<app-child [fromParent]="test"></app-child>

Answer 3

在您的app.component.html 中，您调用您的子组件 selector（假设它是child-app）：

<child-app></child-app>

然后将声明为@input() 的内容添加到其中，并将其绑定到AppComponent 中的值（即test）：

<child-app [fromParent]="test" ></child-app>

最后你应该将你的 sn-p 重构为：

****child.component.ts:****

export class ChildComponent { // Here is not AppComponent
    @Input() fromParent: number;
    childvar: number;


    show() {
        this.childVar = this.fromParent + 5; // this op should be inside a method 
        console.log(this.childVar);
    } //this should to show 15 in console...
}

Answer 4

您可以在下面找到一个示例，该示例说明了允许父组件绑定子组件可以访问的属性的机制。

父组件模板：parent.component.html

<child-component 
    [fromParent]="fromParent">
</child-component>

父组件类：parent.component.ts

export class ParentComponent {
  fromParent: string = 'String from parent';
}

子组件类：child.component.ts

import { Component, Input } from '@angular/core';

//...

export class ChildComponent {
  @Input() fromParent: string;
}

子组件模板：child.component.html

String from parent: {{ fromParent }}

Answer 5

属性绑定和事件绑定是angular中的两个核心概念。

组件和指令可以被视为分别定义您的自定义元素和属性。 例如：h1 是一个已经在 HTML 中定义的标签，但 app-root 不是。因此，我们可以将角度组件视为创建自定义元素和指令作为自定义属性的一种方式。 （暂时）

如果在另一个标签的组件 html 中使用，则一个属性/标签将成为另一个的子标签。

子可以通过事件绑定将一些数据传递给父。

父级可以将一些数据传递给子级即属性绑定。

应该有某种方式来说明 Angular 编译器可以通过子级（在模板上）访问子级内部的变量来表示我们对属性使用 @Input() 装饰器。

Answer 6

*So what if the apples component is almost the same for each instance, but we need it to display a different description for each instance? We use Input .*  

  // app.component.html
<app-apple [description]="appleDescription"></app-apple>

appleDescription 可以是 app.component.html 中的任何类属性。

// apple.component.ts
import { Component, OnInit, Input } from '@angular/core';
...
export class AppleComponent implements OnInit {
   @Input() description: string;
...

现在，描述由父组件传入。在这种情况下，它是 app.component.html。任何值都可以传递到 [description] 中，并且 description 可以在 apple.component.html 或 apple.component.ts 内的任何地方使用，就好像它是遵循正常更改检测的常规类属性一样。

// apple.component.html
{{ description || 'Nothing has been typed yet...' }}