Angular 组件交互(一)@Input

Angular 中各个组件之间可以通过 @Input 和 @Output 来实现参数的传递。@Input 代表传递的“入”方向,@Output 代表传递的“出”方向。

@Input

在大部分情况下,我们可以通过 @Input 描述符来修饰传递给此组件的参数。假设,我们有 app-component 与 sub-component 两个组件。若前者想向后者传递参数,那么后者只需要在组件中使用 @Input 修饰这个变量即可。

创建输入变量

首先在 sub-component 中定义一个变量 msg ,并用 @Input 进行修饰。这意味着 msg 是从其他组件传递过来的。组件本身可以像使用正常变量一样,在模板(template)中使用它。如下所示。

大功告成!

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

陷阱

需要注意的是,使用这个输入变量的语法有两种。加方括号和不加方括号。

使用方括号时,里面的内容会被当做模板表达式(template expression )被 Angular 解析,否则引号中的内容会被当做一个字符串常量进行解析。

在线例子

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

参考链接

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

Angular Input 官方文档

发表评论

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