Angular组件间传值

在Angular中，父组件调用子组件，可以传递参数，子组件根据传递过来的参数返回相应的数据；

父组件向子组件传参，过程如下：

方法一：

在子组件中：

@Component({selector: 'test-component',template: `{{inputValue}}`,inputs: ['inputsValue'] })export class TestComponent {private inputsValue;//注意，要在组建内声明，才能使用}

在父组件中：

@Component({selector: 'parent-component',template: `<test-component [inputsValue]="data"></test-component>`//以“[属性]=值”的方式传递})export class ParentComponent {  private data = 'Hello InputValue~!';}

如果不配置元数据，我们还可以在组件类中用“@Inputs() inputsValue”声明，效果一样。

方法二：

在子组件中：

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

@Component({selector: 'test-component',template: `{{inputValue}}`})export class TestComponent {@Input() name: string;//注意，要在组建内声明，才能使用}

在父组件中设置与方法一相同，此处不再赘述。

PS：@Input后面要加上()，不然没效果。