父组件传给子组件:
子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。
子组件:
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时,set name(name:string)
方法会执行,如果不需要处理setter,那么用title的形式,一行代码声明即可.
父组件调用:
<app-header [title]="title" name="姓名"></app-header>
调用方法有两种,属性名用中括号包围的title,值title是父组件中的对象名,而name没有用中括号,后面的值就是传给子组件的字符串。当然,不用中括号,也可以用{{name}}传对象的值。
如果要监听传入属性值的变化,可以在子组件实现OnChanges(@angular/core中)接口:
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
}
SimpleChanges 是一个用属性名作key的数组,通过属性名取出对象,对象里包含该属性变化前(previousValue)后(currentValue)的值。
父组件监听子组件变化
子组件通过@Output()暴露EventEmitter,父组件在声明子组件时增加EventEmitter的回调方法,子组件在需要的时候弹射事件,父组件的回调方法里就能收到。
子组件:
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
//声明事件发射器
@Output() checkEmitter=new EventEmitter<boolean>();
//用于绑定checkbox的checked属性
isChecked=true;
toggle() {
this.isChecked=!this.isChecked;
//发射事件
this.checkEmitter.emit(this.isChecked);
}
}
子组件模板:
<p>
{{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>
父组件中声明:
<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
父组件事件回调接收:
export class AppComponent implements AfterViewInit{
ngAfterViewInit() {
}
onCheckedChange(isChecked:boolean) {
console.log("checkbox选中状态:"+isChecked);
}
}
组件之间通讯-使用服务通讯模式
一、定义服务import { Injectable } from ‘@angular/core‘;
import {Subject}from"rxjs/Subject";
@Injectable()
export class CService {
private outputTitle = new Subject();
//订阅
//声明变量 订阅Observer
output$ = this.outputTitle.asObservable();
//推送 调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue
UpData(message:any) {
this.outputTitle.next(message);
}
}
2、子组件发布消息()
首先注入服务cs : CService
this.CS.UpData({title:"铃铛宠物",ico:""});//推送数据更新 3、目标组件订阅该消息,多个目标可同时订阅 rms为已注入的服务 rms:CService延伸阅读:ngAfterViewInit (): void {this . rms . output$ . subscribe ( v=> {console . log ( v ,new Date ()) ;} )}
观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。
我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下:
-
期刊出版方 - 负责期刊的出版和发行工作
-
订阅者 - 只需执行订阅操作,新版的期刊发布后,就会主动收到通知,如果取消订阅,以后就不会再收到通知
在观察者模式中也有两个主要角色:Subject (主题) 和 Observer (观察者) 。它们分别对应例子中的期刊出版方和订阅者。
原文:https://www.pocketdigi.com/20170125/1555.html