Angular学习笔记之组件之间的交互

1、@Input：可设置属性

　　　　　当它通过属性绑定的形式被绑定时，值会“流入”这个属性。

　　　　　在子组件中使用，例如：@Input（）name:string

　　　　　父组件定义宾亮，并在父组件的模板中绑定，例如：

　　　　　　子组件模板中：{{name}}

　　　　　　子组件控制器中：@Input（）name:string

　　　　　　父组件控制器中：username = "Lion"

　　　　　　父组件模板中：[name] = "username" （在调用的子组件的选择器中绑定）

　　　　　此时，数据即从父组件传入子组件，子组件能在本身的模板中使用改“name”变量

2、@Output：可观察对象型属性

　　　　　几乎总是返回Angular 的EventEmitter，当它通过事件绑定的形式被绑定时，值会“流出”这个属性

　　　　　在子组件中使用。例如：@Output() arriveMessage = new EventEmitter()

　　　　　子组件模板中绑定一个事件，例如按钮的点击事件（click()），在子组件控制器中定义一个被绑定到按钮点击事件的事件(message())，并在该事件中做出处理，即emit(弹射)例中的arriveMessage，在父组件的模板中绑定arriveMessage，绑定位置为子组件的选择器位置，最后在父组件的控制器中进行事件处理(footerArriveMessage())

　　　　　例如：

　　　　　子组件模板：(click) = "message()"

　　　　　子组件控制器：@Output() arriveMessage = new EventEmitter()

　　　　　　　　　　　　message(){

　　　　　　　　　　　　　　..............

　　　　　　　　　　　　　　this.arriveMessage.emit();

　　　　　　　　　　　　}

　　　　　父组件模板：(arriveMessage) = "footerArriveMessage()"

　　　　　父组件控制器中：footerArriveMessage(){

　　　　　　　　　　　　　　进行处理

　　　　　　　　　　　　}

3、子组件与子组件之间通过中间人模式实现通讯（需要有一个共同的父组件）

4、子组件与子组件之间通过服务来实现组件之间的通讯（没有共同父组件）

5、父组件与子组件通过本地变量互动

　　　　　在父组件的模板中使用，即在爱组件的选择器中声明一个本地变量（#变量名）例如：#name，该变量名即可代表子组件，之后可在父组件模板中调用子组件的属性和方法

　　　　　例如：

　　　　　　(click) = "name.属性" 或 (click) = "name.方法"

　　　　　缺陷：

　　　　　父子组建的连接必须全部在父组件的模板中进行，在父组件的控制器中无法访问子组件的属性和方法

6、父组件调用@ViewChild()

总结：

　　@Input：在子组件中使用。数据从父组件传递到子组件

　　@Output：在子组件中使用。子组件的元素事件（例如：点击事件）的处理函数发射出父组件的自定义事件，触发自定义事件，父组件执行函数处理该自定义事件。

　　局部变量实现数据交互：在父组件中使用。父组件在局部模板中自定义一个局部变量，形如#····。通过局部变量访问子组件的公共变量和方法。局限是只能在局部模板中使用，不能在父组件的类中对子组件的相关变量和方法进行修改。

　　@ViewChild：在父组件中使用。通过此方法实现的数据交互，可以对子组件的相关变量和方法进行修改。

巴特西

Angular学习笔记之组件之间的交互

最新文章

热门文章