用@Input装饰器为Angular中的组件传值

使用Angular框架开发应用时，组件(Component)是组建应用的基本模块之一。一个组件可以是一屏完整的界面(初学Angualr的人往往是这样认识组件的)，也可以是界面中的一部分，小到一个按钮(Button),一个输入框(Input)；大到一个列表或是一个复杂的业务输入表单(Form)。那如何提高组件的复用度呢？当然是采用传参的方式，将变化的部分通过参数抽取，隔离出来，就像我们在定义函数的时候做的那样。

在Angualr中，为组件定义参数的方式是使用”@Input”装饰器修饰组件类中的属性。在这样什么属性后，我们就可以在使用组件时为参数赋值。就像调用函数时形式参数赋予实际参数值一样。

使用常量对参数进行赋值

比如我们构造了一个在页面顶部显示公司名称的组件(Component),
header.componets.ts

export class HeaderComponent implements OnInit {

  @Input()
  companyName: string;

  constructor() { }

  ngOnInit() {
  }

}

header.component.html
对应的模板文件为:

1
2
3

<div>
  {{ companyName }}
</div>

在需要显示公司名称的界面就可以这样来调用:

1	<app-header companyName="Hohistar"></app-header>

使用变量对参数进行赋值

比如我们开发一个个人待办事项管理的应用，其中我们定义一个TodoComponet, 职责是在在界面上显示、编辑一个代办事项(Todo)。为了在不同的界面复用这个类，我们将具体的Todo数据作为参数传给组件。TodoComponent的定义如下：
todo.component.ts 文件

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {

  @Input()
  todo: Todo;

  constructor() { }

  ngOnInit() {
  }
}

注意: 定义属性变量todo时使用了@Input装饰器进行装饰
todo.component.html 文件

<div class="card">
  <div class="card-head">
      {{todo.title}}
  </div>
  <div class="card-content">
      {{todo.desc}}
  </div>
  <div class="card-footer">
      {{todo.done}}
  </div>
</div>

在列表页面，我们就可以通过传值来复用这个控件了。

1
2
3

<div *ngFor = "let todo of todos">
  <app-todo [todo]="todo"></app-todo>
</div>

注意: 引用todo时使用了[]符号将参数名包裹，因为需要绑定的参数是一个（在父组件中的）变量

为参数定义一个别名

在上面的例子中，我们在调用组件传参时使用的名字就是类的属性名。在一些特殊的场景中，你可能想要为参数定义一个不同的名称，还好，@Input装饰器支持这样做。比如我们想将给第一个例子中的companyName属性一个别名title,我们就可以这样做:

export class HeaderComponent implements OnInit {

  @Input('title')
  companyName: string;

  constructor() { }

  ngOnInit() {
  }

}

调用的html代码改为

1	<app-header title="Hohistar - title"></app-header>

注意因为Angular的开发团队认为给参数加别名的方式是不利于维护的，所以在tslint的代码检测中默认会报错。为解决这个问题，我们需要在tslint的配置文件中关闭这项检查。在src目录中，找到tslint.json文件，在rules中加入’no-input-rename: fales’就可以了

{
  "extends": "../tslint.json",
  "rules": {
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "no-input-rename": false
  }
}