2

我尝试学习 Angular，现在我已经到了这个@Input阶段。

我有一个主应用程序和一个子组件。在app.component.ts我有一个测试变量。我想将此变量从app.component.tsto 传递给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...
}

现在，我该怎么做？

4

6 回答 6

2

在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...
}
于 2018-12-07T09:52:56.543 回答
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 }}
于 2018-12-07T10:01:22.237 回答
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);
    }
}
于 2018-12-07T09:41:38.783 回答
1

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

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

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

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

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

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

于 2018-12-07T11:00:06.263 回答
0

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

<app-child [fromParent]="test"></app-child>
于 2018-12-07T09:42:33.067 回答
0 
*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...' }}
于 2020-06-01T07:29:29.390 回答