Angular 组件交互(二)@Input

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

数据从父组件流向子组件的过程也被称为属性绑定(property binding)。属

性绑定反映了 Angular 将组件中的变量与 DOM 元素一一对应的关系。通过属

性绑定可以将变量的变化实时传入其他组件中,由 Angular 变化检测和视图更

新机制将充当视图层与控制层的中间人,负责消息的传递和界面的更新。从而

实现视图层与控制层的解耦,减少代码维护,需求变更带来的开发成本。

既然属性绑定好处多多,现在就让我们来了解一下 Angular 属性绑定的关键成

员——@Input 修饰符。

什么是属性绑定

属性绑定可以理解为将组件的某个成员变量当做 HTML 元素的属性传递给某个

元素。乍看之下,这和我们直接设定 HTML 元素的属性办法差不多。比如我们

想设定 <a> 标签的 href 属性我们可以这样写。

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

只不过在 Angular 中,标签也不仅仅只包含 HTML 原生标签,也可以是我们

在组件中自定义的标签。我们可以利用 @Input 修饰符很轻松的为组件设定一

个输入属性,其他组件借由该组件对应标签提供的这个属性,完成对该组件的

数据传递。

@Input

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

假设我们有 app-component 与 sub-component 两个组件。前者想向后者传

递参数,那么我们可以用 @Input 来处理。

创建输入变量

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

着,msg 这个变量是从其他组件传递过来的。定义完之后,在 此组件本身可以

像使用正常变量一样,在模板(template)中使用它。如下所示,我用插值表

达式 {{ msg }} 在页面显示了这个 msg 变量。

大功告成!

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

陷阱

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

差别在于,使用方括号时,方括号里的内容会被当做模板表达式(template

expression )被 Angular 解析,否则引号中的内容会被当做一个字符串常量

进行解析。

在线例子

我写了一个在线例子。参考本文会理解的更快。

参考链接

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

Angular Input 官方文档

发表评论

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