Angular开发实践（四）：组件之间的交互
|
在Angular应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。 根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。 父组件向子组件传递子组件通过@Input装饰器定义输入属性，然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据，子组件可通过 先定义两个组件，分别为 子组件： @Component({
selector: 'demo-child',template: `
<p>{{paramOne}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent {
@Input() paramOne: any; // 输入属性1
@Input() paramTwo: any; // 输入属性2
}
子组件通过 父组件： @Component({
selector: 'demo-parent',template: `
<demo-child [paramOne]='paramOneVal' [paramTwo]='paramTwoVal'></demo-child>
`
})
export class DemoParentComponent {
paramOneVal: any = '传递给paramOne的数据';
paramTwoVal: any = '传递给paramTwo的数据';
}
父组件在其模板中通过选择器 通过 setter 截听输入属性值的变化在实际应用中，我们往往需要在某个输入属性值发生变化的时候做相应的操作，那么此时我们需要用到输入属性的 setter 来截听输入属性值的变化。 我们将 @Component({
selector: 'demo-child',template: `
<p>{{paramOneVal}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent {
private paramOneVal: any;
@Input()
set paramOne (val: any) { // 输入属性1
this.paramOneVal = val;
// dosomething
};
get paramOne () {
return this.paramOneVal;
};
@Input() paramTwo: any; // 输入属性2
}
在上面的代码中，我们可以看到通过 通过ngOnChanges()来截听输入属性值的变化
在 @Component({
selector: 'demo-child',template: `
<p>{{paramOneVal}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent implements OnChanges {
private paramOneVal: any;
@Input()
set paramOne (val: any) { // 输入属性1
this.paramOneVal = val;
// dosomething
};
get paramOne () {
return this.paramOneVal;
};
@Input() paramTwo: any; // 输入属性2
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
for (let propName in changes) { // 遍历changes
let changedProp = changes[propName]; // propName是输入属性的变量名称
let to = JSON.stringify(changedProp.currentValue); // 获取输入属性当前值
if (changedProp.isFirstChange()) { // 判断输入属性是否首次变化
console.log(`Initial value of ${propName} set to ${to}`);
} else {
let from = JSON.stringify(changedProp.previousValue); // 获取输入属性先前值
console.log(`${propName} changed from ${from} to ${to}`);
}
}
}
}
新增的 获取父组件实例前面介绍的都是子组件通过 当然，我们可以想到一种更主动的方法，那就是获取到父组件实例，然后调用父组件的某个属性或方法来获取需要的数据。考虑到每个组件的实例都会添加到注入器的容器里，因此可通过依赖注入来找到父组件的示例。
要在子组件中获取父组件的实例，有两种情况：
子组件向父组件传递依然先定义两个组件，分别为 子组件： @Component({
selector: 'demo-child',template: `
<p>子组件DemoChildComponent</p>
`
})
export class DemoChildComponent implements OnInit {
readyInfo: string = '子组件DemoChildComponent初始化完成！';
@Output() ready: EventEmitter = new EventEmitter<any>(); // 输出属性
ngOnInit() {
this.ready.emit(this.readyInfo);
}
}
父组件： @Component({
selector: 'demo-parent',template: `
<demo-child (ready)="onReady($event)" #demoChild></demo-child>
<p>
<!-- 通过本地变量获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChild.readyInfo}}
</p>
<p>
<!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChildComponent.readyInfo}}
</p>
`
})
export class DemoParentComponent implements AfterViewInit {
// @ViewChild('demoChild') demoChildComponent: DemoChildComponent; // 通过模板别名获取
@ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通过组件类型获取
ngAfterViewInit() {
console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
}
onReady(evt: any) {
console.log(evt); // 打印结果：子组件DemoChildComponent初始化完成！
}
}
父组件监听子组件的事件子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。 在上面定义好的子组件和父组件，我们可以看到： 子组件通过 父组件在其模板中通过选择器 父组件与子组件通过本地变量（模板变量）互动父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。 在上面定义好的子组件和父组件，我们可以看到： 父组件在模板 <p>
<!-- 获取子组件的属性readyInfo，显示：子组件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChild.readyInfo}}
</p>
父组件调用@ViewChild()本地变量方法是个简单便利的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。 如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。 当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。 在上面定义好的子组件和父组件，我们可以看到： 父组件在组件类中通过 <p>
<!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChildComponent.readyInfo}}
</p>
ngAfterViewInit() {
console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
}
通过服务传递Angular的服务可以在模块注入或者组件注入（均通过 在模块中注入的服务在整个Angular应用都可以访问（除惰性加载的模块）。 在组件中注入的服务就只能该组件和其子组件进行访问，这个组件子树之外的组件将无法访问该服务或者与它们通讯。 下面的示例就以在组件中注入的服务来进行父子组件之间的数据传递： 通讯的服务： @Injectable()
export class CallService {
info: string = '我是CallService的info';
}
父组件： @Component({
selector: 'demo-parent',template: `
<demo-child></demo-child>
<button (click)="changeInfo()">父组件改变info</button>
<p>
<!-- 显示：我是CallService的info -->
{{callService.info}}
</p>
`,providers: [CallService]
})
export class DemoParentComponent {
constructor(public callService: CallService) {
console.log(callService.info); // 打印结果：我是CallService的info
}
changeInfo() {
this.callService.info = '我是被父组件改变的CallService的info';
}
}
子组件： @Component({
selector: 'demo-child',template: `
<button (click)="changeInfo()">子组件改变info</button>
`
})
export class DemoChildComponent {
constructor(public callService: CallService) {
console.log(callService.info); // 打印结果：我是CallService的info
}
changeInfo() {
this.callService.info = '我是被子组件改变的CallService的info';
}
}
上面的代码中，我们定义了一个CallService服务，在其内定义了info属性，后面将分别在父子组件通过修改这个属性的值达到父子组件互相传递数据的目的。 然后通过DemoParentComponent的 此时，通过
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |