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

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

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

使用常量对参数进行赋值

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

1
2
3
4
5
6
7
8
9
10
11
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 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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 文件

1
2
3
4
5
6
7
8
9
10
11
<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,我们就可以这样做:

1
2
3
4
5
6
7
8
9
10
11
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’就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"no-input-rename": false
}
}

本文标题:用@Input装饰器为Angular中的组件传值

文章作者:梅老师

发布时间:2019年05月31日 - 14:05

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/angular/angular-component-input/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。