单页面应用组件通信有以下几种，这篇文章主要讲 Angular 通信
父组件 => 子组件
子组件 => 父组件
组件A = > 组件B
父组件 => 子组件
子组件 => 父组件
sibling => sibling
@input
@output
setters (本质上还是@input)
注入父组件
ngOnChanges() (不推荐使用)
局部变量
@ViewChild()
service
service
service
Rxjs的Observalbe
Rxjs的Observalbe
Rxjs的Observalbe
localStorage,sessionStorage
localStorage,sessionStorage
localStorage,sessionStorage
上面图表总结了能用到通信方案,期中最后3种,是通用的,angular的组件之间都可以使用这3种,其中Rxjs是最最牛逼的用法,甩redux,promise,这些同样基于函数式的状态管理几条街,下面一一说来
父组件 => 子组件
@input,最常用的一种方式
@Component({ selector: 'app-parent', template: '<div>childText:<app-child [textContent] = "varString"></app-child></div>', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { varString: string; constructor() { } ngOnInit() { this.varString = '从父组件传过来的' ; } }
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-child', template: '<h1>{{textContent}}</h1>', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() public textContent: string ; constructor() { } ngOnInit() { } }
setter
setter 是拦截@input 属性,因为我们在组件通信的时候,常常需要对输入的属性处理下,就需要setter了,setter和getter常配套使用,稍微修改下上面的child.component.ts
child.component.ts
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-child', template: '<h1>{{textContent}}</h1>', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { _textContent:string; @Input() set textContent(text: string){ this._textContent = !text: "啥都没有给我" ? text ; } ; get textContent(){ return this._textContent; } constructor() { } ngOnInit() { } }
onChange
这个是通过angular生命周期钩子来检测,不推荐使用,要使用的话可以参angular文档
@ViewChild()
@ViewChild() 一般用在调用子组件非私有的方法
import {Component, OnInit, ViewChild} from '@angular/core'; import {ViewChildChildComponent} from "../view-child-child/view-child-child.component"; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { varString: string; @ViewChild(ViewChildChildComponent) viewChildChildComponent: ViewChildChildComponent; constructor() { } ngOnInit() { this.varString = '从父组件传过来的' ; } clickEvent(clickEvent: any) { console.log(clickEvent); this.viewChildChildComponent.myName(clickEvent.value); } }
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-view-child-child', templateUrl: './view-child-child.component.html', styleUrls: ['./view-child-child.component.css'] }) export class ViewChildChildComponent implements OnInit { constructor() { } name: string; myName(name: string) { console.log(name); this.name = name ; } ngOnInit() { } }
局部变量
局部变量和viewChild类似,只能用在html模板里,修改parent.component.html,通过#viewChild这个变量来表示子组件,就能调用子组件的方法了.
<div> <input type="text" #viewChildInputName > <button (click)="viewChild.myName(viewChildInputName.value)">局部变量传值</button> <app-view-child-child #viewChild></app-view-child-child> </div>
child 组件如下
@Component({ selector: 'app-view-child-child', templateUrl: './view-child-child.component.html', styleUrls: ['./view-child-child.component.css'] }) export class ViewChildChildComponent implements OnInit { constructor() { } name: string; myName(name: string) { console.log(name); this.name = name ; } ngOnInit() { } }
子组件 => 父组件
@output()
output这种常见的通信,本质是给子组件传入一个function,在子组件里执行完某些方法后,再执行传入的这个回调function,将值传给父组件
parent.component.ts