浅谈Angular组件之间通信的5种方法

age = 18;
name = '  xiaoming '

<app-child-1 [age]="age" [name]="name"></app-child-1>

@Input() age!: number;

@Input()
set name(name: string) {
    this._name = name.trim();
}
private _name: string;

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
}

@Output() voted = new EventEmitter<boolean>();
emitValue(): void {
    this.voted.emit(true);
}

<button (click)="emitValue()">Click</button>

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)"></app-child-1>

getChildParam(value: boolean): void {
    console.log(value); // true
}

address = 'Shanghai';
setAddress(address: string): void {
    this.address = address;
}

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)" #child1Component></app-child-1>
<div>{{child1Component.address}}</div>
<button (click)="child1Component.setAddress('Beijing')">Click</button>

@ViewChild(Child1Component) private child1Component!: Child1Component;

import {BehaviorSubject} from 'rxjs';
import { Injectable} from '@angular/core';
@Injectable(
  {providedIn: 'root'}
)
export class DataService {
  data: BehaviorSubject<number> = new BehaviorSubject<number>(0);
}

constructor(private dataService: DataService) {}
    // 设置data的值
changeData(): void {
    this.dataService.data.next(10);
}

<button (click)="changeData()">Click</button>

constructor(private dataService: DataService) {
    this.dataService.data.subscribe(value => {
        console.log(value); // 10
    });
}