angular@Input用法

使用angular一周，组件传值和react不同，因此整理如下，以备后查！

@Input是angular提供给父元素传递信息的窗口，功能顾名思义——输入值。
具体用法如下：

父组件

//parent.component.ts
import { Component, Input } from '@angular/core'

@Component({
    selector: 'parent',
    templateUrl: './parent.component.html'
})

export class ParentComponent {
    parentData: {
      data1:string =  '测试字符串1'
    }
}

//parent.component.html
    <div>
        <child [childData]="parentData"></child>
    </div

在父组件上定义了parentData对象，在HTML文件中，包含了子组件<child />。这里需要介绍angular属性绑定方法[属性名]，在方括号中加入属性名比如src、href等，当然可以自定义，比如这里的childData。这个地方相当于将父组件要传递给子组件的对象parentData赋给子组件属性childData。这样子组件只要定义好@Input装饰器就能拿到parentData对象。

子组件

//child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})

export class ChildComponent {
  @Input() childData;
}

另外，Input 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input 装饰器，装饰的属性名。比如：

父组件

//parent.component.ts
import { Component, Input } from '@angular/core'

@Component({
    selector: 'parent',
    templateUrl: './parent.component.html'
})

export class ParentComponent {
    parentData: {
      data1:string =  '测试字符串1'
    }
}

//parent.component.html
    <div>
        //改了这里
        <child [jianshu]="parentData"></child>
    </div

子组件

//child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})

export class ChildComponent {
   //命了个名
  @Input('jianshu') childData;
}

the end!

angular@Input用法

推荐阅读更多精彩内容