Angular2 组件交互实例详解_网络技术_宿州市腾雀网络科技有限公司

Angular2 组件交互实例详解

发布时间 - 2026-01-11 02:56:59 点击率：次

1. 组件通信

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

l 使用输入型绑定，把数据从父组件传到子组件

l 通过 setter 拦截输入属性值的变化

l 使用 ngOnChanges 拦截输入属性值的变化

l 父组件监听子组件的事件

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

l 父组件调用 ViewChild

l 父组件和子组件通过服务来通讯

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

2. 输入型绑定

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

@Component({
selector: 'child',
template: 'I am fron {{input}}'
})
export class ChildComponent implements OnInit {
@Input()
input;
constructor() { }
ngOnInit() { }
}
@Component({
selector: 'parent',
template: '<child [input]="data"></child>'
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
}

以上的例子我们可以看出，存在父子两个组件，在父组件ParentComponent中的模板中引入了<child [input]="data"></child>子组件，并将data数据通过属性绑定的方式绑定到input属性中传入到子组件中，子组件中通过@Input()注解修饰input属性来接收传入的数据，并显示在模板I am fron {{input}}中。

输入型绑定是从父组件传递数据到子组件最常见的方式。

3. setter监听

我们知道，Angular2是一个MVVM的框架，当数据发生变化时能够同步显示到模板视图中，可以使用一个输入属性的 setter 函数，以拦截父组件中值的变化，并采取行动。例如，我们改造上面的例子，子组件中使用set，get重写对应的绑定input属性，当输入值方式变化时输出一个控制台信息。

@Component({
selector: 'child',
template: 'I am fron {{data}}'
})
export class ChildComponent implements OnInit {
_input:string;
@Input()
public set input(v : string) {
this._input = v;
console.log(v);
}
public get input() : string {
return this._input;
}
constructor() { }
ngOnInit() { }
}

4. ngOnChanges

除了上面说的setter函数可以响应输入数据的变化外，Angular2还提供了一个生命周期函数ngOnChanges 可以监听数据的变化。使用 OnChanges 生命周期钩子接口的 ngOnChanges 方法来监测输入属性值的变化并做出回应。我们改造以上的子组件来响应对应的变化，在这个示例中，我们监听了输入数据的变化，采取的对应动作仅仅是输出对应的信息，当然你也可以做很多其他的事情。

@Component({
selector: 'child',
template: 'I am fron {{data}}'
})
export class ChildComponent implements OnInit, OnChanges {
_input: string;
@Input()
public set input(v: string) {
this._input = v;
console.log(v);
}
public get input(): string {
return this._input;
}
constructor() { }
ngOnInit() { }
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}

5. 事件传播

上面的集中方式都是父组件如何向子组件传递数据以及子组件如何监听数据的变化，事件传播则是子组件如何向父组件通信的一种方式。子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits( 向上弹射 ) 事件。父组件绑定到这个事件属性，并在事件发生时作出回应。子组件的 EventEmitter 属性是一个输出属性，通常带有 @Output 装饰器。

@Component({
selector: 'child',
template: `
I am fron {{data}}<br />
<button id="out" (click)="click()">click for out</button>
`
})
export class ChildComponent implements OnInit, OnChanges {
_input: string;
@Input()
public set input(v: string) {
this._input = v;
console.log(v);
}
public get input(): string {
return this._input;
}
@Output()
output:EventEmitter<string> = new EventEmitter<string>();
click(){
this.output.emit("i am from child");
}
constructor() { }
ngOnInit() { }
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
@Component({
selector: 'parent',
template: '<child [input]="data" (output)="output($event)"></child>'
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event){
console.log($event);
}
}

在上面的例子中，我们在子组件ChildComponent添加了一个向外传播的事件output:EventEmitter<string> = new EventEmitter<string>()，并添加了一个点击的按钮，当按钮事件触发时，就会调用output事件向父组件传递事件，并将数据作为参数传递到父组件ParentComponent中，同时在父组件ParentComponent的模板<child [input]="data" (output)="output($event)"></child>中可以看到，我们使用模板语法中的事件绑定，绑定了output函数作为对应事件的接受函数，当子组件output事件触发是，父组件的函数就会得到执行。

使用事件传播来进行子组件对父组件之间的通信是最常见的方式。

6. 本地变量

在模板语法中，我们知道存在着本地变量这种语法，可以使用本地变量来代表对应的组件。虽然父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，不过这种使用方式只能在模板中使用，例如如下所示，改写上面例子中的父组件模板，代码如下。

我们在ParentComponent组件中使用本地变量#child获取了child组件的实例，这样就可以在模板中使用其属性或者方法，例如child.input。

@Component({
selector: 'parent',
template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}'
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event){
console.log($event);
}
}

7. ViewChild

本地变量的方式是在父组件的模板中获取子组件的实例，有木有其他方式可以在组件的类中获取子组件的实例呢？答案是肯定的，如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。当父组件类需要这种访问时，可以把子组件作为ViewChild，注入到父组件里面。例如，我们改造上面的父组件的组件类，使用ViewChild来获取子组件的实例，代码如下：

@Component({
selector: 'parent',
template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}'
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent)
private childComponent: ChildComponent;
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event) {
console.log($event);
}
}

在以上的代码中，我们使用@ViewChild(ChildComponent)注解的形式获取了对应子组件childComponent的实例，这样在父组件类中就可以调用子组件对应的属性及方法了。

相对于本地变量的方式而言，ViewChild的方式更加灵活，用途也比较广泛。但是，需要注意的一点是，必须等待父组件的视图显示完成后才可以使用，因此，ngAfterViewInit 生命周期钩子是非常重要的一步。

8. 服务方式

通过服务依赖注入的方式，我们可以了解到，服务在父子组件之间是可以共享的，因此，我们可以利用共享的服务的形式在父子组件之间进行通信。

如果我们将服务实例的作用域被限制在父组件和其子组件内，这个组件子树之外的组件将无法访问该服务或者与它们通讯。

一般来说，父子之间使用服务的方式来通行，是采用事件消息的形式来实现的。

例如，如下的代码中，父子组件中共享了Service服务，并在各自的类中获取了Service服务的实例，当分别点击父子组件中的按钮时，就能够触发Service服务中的对应的input$以及output$，因为服务是共享的，所以在父子组件中监听对应的服务信息，就能够得到传递的消息。

@Injectable()
export class Service {
input$: EventEmitter<string> = new EventEmitter<string>();
output$: EventEmitter<string> = new EventEmitter<string>();
constructor() {
}
}
@Component({
selector: 'child',
template: `
<button id="out" (click)="click()">click for output</button>
`
})
export class ChildComponent {
constructor(private _service: Service) {
this._service.input$.subscribe(function (input: string) {
console.log(input);
})
}
click() {
this._service.output$.emit('i am from child');
}
}
@Component({
selector: 'parent',
template: '<child></child><button id="input" (click)="click()">click for input</button>',
providers: [Service]
})
export class ParentComponent {
constructor(private _service: Service) {
this._service.output$.subscribe(function (output: string) {
console.log(output);
})
}
click() {
this._service.input$.emit('i am from child');
}
}

总结

以上所述是小编给大家介绍的Angular2 组件交互实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# angular2 # 组件交互 # 组件 # angular写一个列表的选择全选交互组件的示例 # Angular2实现组件交互的方法分析 # Angular 组件之间的交互的示例代码 # 绑定 # 是一个 # 就会 # 类中 # 并在 # 并将 # 子树 # 几种 # 可以使用 # 最常见 # 小编 # 就可以 # 应用程序 # 都是 # 是在 # 在这个 # 是有 # 在此 # 周期函数 # 则是

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：使用Autotools构建Linux驱动模块的配置技巧

下一篇：CN2服务器选择与高速建站技巧：外贸网站优化方案解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：使用Autotools构建Linux驱动模块的配置技巧

下一篇：CN2服务器选择与高速建站技巧：外贸网站优化方案解析