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中，将您的子组件称为 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 2

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

父组件模板： 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 3

只需将属性放在 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 4

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

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

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

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

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

应该有某种方式说说角度编译器，子级（在模板上）可以访问子级内的变量，以表示我们对属性使用@Input（）装饰器。

Answer 5

无论何时放置子组件，都将初始化其变量。因此，您可以在父模板的某个位置执行以下操作：

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

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]中，并且描述可以在apple.component.html或apple.component.ts内部的任何地方使用，就好像它是遵循常规更改检测的常规类属性一样。

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

了解@input-从父母到孩子

6 个答案: