Angular 组件化之 @Input

前端组件化带来的需求就是前端框架必须能够实现父子组件之间的通讯。

其中父组件数据流向子组件这一过程叫做属性绑定(property binding)。

在 Angular 中实现属性绑定的方法有很多,其中一种是利用 @Input 修饰符。

什么是属性绑定

从字面上来理解,属性绑定就是把某个值绑定到某个组件上

反过来也可以说将组件的某个属性被设置为某个特定的值。

“ 这不就是改变 DOM 元素属性么”,在 HTML 中我们常做这样的操作。

这里我们就把 a 的属性 href 设置成了 https://www.baidu.com。

只不过在 Angular 中,这里的属性是自定义的,属性的值也可以是一个变量。

Angualr 属性绑定的例子

回过头来看看 Angular,其实对于接触过一段时间的同学碰到过这样的写法。

我们可以把一个字符串数组赋值给 ngClass 来动态调整组件的 class。

这里的 ngClass 可以看做 button 的一个内置属性(当然它本身是一个指令)

当我们把值传给 ngClass 的时候,是不是有点像操作 button 属性的感觉呢。

@Input

在大部分情况下,我们可以通过@Input 来实现参数的传递。

假设我们有 app-component 与 sub-component 两个组件。

前者想向后者传递参数,那么我们可以用这样的方式来处理。

首先在 sub-component 中定义一个变量 msg 并用 @Input 进行修饰。

这意味着,msg 这个变量是从外部传递过来的。

其他变量一样,我们可以利用模板(template)语法使用它。

然后我们就可以在其他组件中这样使用这个 SubComponent 组件。

陷阱

需要注意的是,属性绑定的语法有两种。加方括号和不加方括号。

差别在于,使用方括号时,

方括号里的内容会被当做变量(template expression )被 Angular 解析,

否则括号中的内容会被当做一个字符串常量进行解析。

参考链接

When to use square brackets [ ] in directives @Inputs and when not?

Angular Input 官方文档

发表评论

电子邮件地址不会被公开。 必填项已用*标注