@Component({ selector: 'app-child-to-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ChildToParentComponent implements OnInit { childName: string; childNameForInject: string; constructor( ) { } ngOnInit() { } showChildName(name: string) { this.childName = name; } }
parent.component.html
<div> <p>output方式 childText:{{childName}}</p> <br> <app-output-child (childNameEventEmitter)="showChildName($event)"></app-output-child> </div> child.component.ts export class OutputChildComponent implements OnInit { // 传入的回调事件 @Output() public childNameEventEmitter: EventEmitter<any> = new EventEmitter(); constructor() { } ngOnInit() { } showMyName(value) { //这里就执行,父组件传入的函数 this.childNameEventEmitter.emit(value); } }
注入父组件
这个原理的原因是父,子组件本质生命周期是一样的
export class OutputChildComponent implements OnInit { // 注入父组件 constructor(private childToParentComponent: ChildToParentComponent) { } ngOnInit() { } showMyName(value) { this.childToParentComponent.childNameForInject = value; } }
sibling组件 => sibling组件
service
Rxjs
通过service通信
angular中service是单例的,所以三种通信类型都可以通过service,很多前端对单例理解的不是很清楚,本质就是
,你在某个module中注入service,所有这个modul的component都可以拿到这个service的属性,方法,是共享的,所以常在app.moudule.ts注入日志service,http拦截service,在子module注入的service,只能这个子module能共享,在component注入的service,就只能子的component的能拿到service,下面以注入到app.module.ts,的service来演示
user.service.ts
@Injectable() export class UserService { age: number; userName: string; constructor() { } }
app.module.ts
@NgModule({ declarations: [ AppComponent, SiblingAComponent, SiblingBComponent ], imports: [ BrowserModule ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { } SiblingBComponent.ts @Component({ selector: 'app-sibling-b', templateUrl: './sibling-b.component.html', styleUrls: ['./sibling-b.component.css'] }) export class SiblingBComponent implements OnInit { constructor(private userService: UserService) { this.userService.userName = "王二"; } ngOnInit() { } }
SiblingAComponent.ts
@Component({ selector: 'app-sibling-a', templateUrl: './sibling-a.component.html', styleUrls: ['./sibling-a.component.css'] }) export class SiblingAComponent implements OnInit { userName: string; constructor(private userService: UserService) { } ngOnInit() { this.userName = this.userService.userName; } }
通过Rx.js通信
这个是最牛逼的,基于订阅发布的这种流文件处理,一旦订阅,发布的源头发生改变,订阅者就能拿到这个变化;这样说不是很好理解,简单解释就是,b.js,c.js,d.js订阅了a.js里某个值变化,b.js,c.js,d.js立马获取到这个变化的,但是a.js并没有主动调用b.js,c.js,d.js这些里面的方法,举个简单的例子,每个页面在处理ajax请求的时候,都有一弹出的提示信息,一般我会在
组件的template中中放一个提示框的组件,这样很繁琐每个组件都要来一次,如果基于Rx.js,就可以在app.component.ts中放这个提示组件,然后app.component.ts订阅公共的service,就比较省事了,代码如下
首先搞一个alset.service.ts
import {Injectable} from "@angular/core"; import {Subject} from "rxjs/Subject"; @Injectable() export class AlertService { private messageSu = new Subject<string>(); // messageObserve = this.messageSu.asObservable(); private setMessage(message: string) { this.messageSu.next(message); } public success(message: string, callback?: Function) { this.setMessage(message); callback(); } }
sibling-a.component.ts
@Component({ selector: 'app-sibling-a', templateUrl: './sibling-a.component.html', styleUrls: ['./sibling-a.component.css'] }) export class SiblingAComponent implements OnInit { userName: string; constructor(private userService: UserService, private alertService: AlertService) { } ngOnInit() { this.userName = this.userService.userName; // 改变alertService的信息源 this.alertService.success("初始化成功"); } }
app.component.ts