理解@input——从parent到child

Question

我努力学习Angular，现在我在@Input阶段。

我有一个主应用程序和一个 child 组件。在 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

Simply put the property on the child selector in your app.component.html as follows -

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

And you may optionally implement OnChanges interface in your child.component.ts, so that it would be -

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

无论何时放置 child 组件，都会初始化它的变量。因此，在 parents 模板中的某处，您可以这样做：

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

最后，您应该将代码段重构为：

****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 template: parent.component.html

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

Parent component class: parent.component.ts

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

Child component class: child.component.ts

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

//...

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

Child component template: child.component.html

String from parent: {{ fromParent }}

Answer 5

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

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

一个 attribute/tag 成为另一个的 child 如果它在另一个标签的组件中使用 html。

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

Parent 可以将一些数据传递给 child 即属性绑定。

应该有某种方式告诉 angular 编译器，child 中的变量可以被 child（在模板上）访问，以表示我们使用 @ 属性的 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.

中的任何 class 属性

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

现在，无论父组件是谁，description都是传入的。在本例中为 app.component.html。任何值都可以传递到 [description] 并且 description 可以在 apple.component.html 或 apple.component.ts 内的任何地方使用，就好像它是遵循正常变化检测的常规 class 属性一样。

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

理解@input——从parent到child

Understanding @input - from parent to child

angular

typescript

input

angular7

angular8