Angular2组件通信的实例代码-创新互联

1. 组件通信

我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种：

1. 使用输入型绑定，把数据从父组件传到子组件
2. 通过 setter 拦截输入属性值的变化
3. 使用 ngOnChanges 拦截输入属性值的变化
4. 父组件监听子组件的事件
5. 父组件与子组件通过本地变量互动
6. 父组件调用 ViewChild
7. 父组件和子组件通过服务来通讯

本文会通过讲解着几种方式来对组件之间的通信做一个大致的介绍。

2. 输入型绑定

输入型绑定指的是利用模板语法中的属性型绑定方式，将父组件的数据传递到子组件对应的对象中，子组件中的对象一般使用@Input装饰器来修饰，作为数据的接受者，例如

@Component({

selector: 'child',

template: 'I am fron {{input}}'

})

export class ChildComponent implements OnInit {

@Input()

input;

constructor() { }

ngOnInit() { }

}

@Component({

selector: 'parent',

template: ''

})

export class ParentComponent implements OnInit {

data: string;

constructor() { }

ngOnInit() {

this.data = "parent";

}

}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。