<span>{{name}}</span>
@Input() public name:string = '';
2、子組件 向 父組件 傳遞數(shù)據(jù)
【Output EventEmitter】
子組件：
@Output() public readonly childEmit: EventEmitter<T> = new EventEmitter<T>(); this.childEmit.emit(data);
父組件：
<app-child (childEmit)="getData($event)"></app-child>
public getData(data:T): void { }
3、ViewChild 方法
因?yàn)槲矣X得這個(gè)方法既可以讓父組件獲取子組件的數(shù)據(jù)，又可以讓父組件給子組件設(shè)置變量值等，所以我這里單獨(dú)分了出來。
父組件：
<app-child **#child**></app-child>
<button (click)="**child**.print('---')">點(diǎn)擊</button>
@ViewChild('child', { static: true })
public child!: ElementRef<HTMLElement>;
public print():void{
if(this.child){
// 這里得到child，可以使用child中的所有的public屬性方法
this.child.print('hello2');
}
}
【示例】
// 父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child #child [name]="name" (childEmit)="childClick($event)"></app-child>
<button (click)="child.print('hello1')">調(diào)用子組件的方法1</button>
<button (click)="print()">調(diào)用子組件的方法2</button>
`
})
export class ParentComponent {
public name:string = '大兒子';
@ViewChild('child', { static: true })
public child!: ElementRef<HTMLElement>;
public childClick(bool:Boolean):void{
// TODO
}
public print():void{
if(this.child){
this.child.print('hello2');
}
}
}
/*****************************************************/
// 子組件
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h3 (click)="myClick()">{{name}}</h3>
`
})
export class HeroChildComponent {
@Input()
public name: string;
@Output()
public readonly childEmit: EventEmitter<boolean> = new EventEmitter<boolean>();
public myClick():void{
this.childEmit.emit(true);
}
public print(content:string):void{
console.log(content);
}
}
非父子組件通信
1、Service
單例模式，其實(shí)就是一個(gè)變量，需要雙向觸發(fā)（發(fā)送信息 / 接收信息），及設(shè)置和獲取數(shù)據(jù)都需要組件自己去處理。
service.ts
import { Component, Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class myService {
public info: string = '';
}
組件 1 向 service 傳遞信息
import { Service1 } from '../../service/service1.service';
...
public constructor(
public service: Service1,
) { }
public changeInfo():void {
this.service.info = this.service.info '1234';
}
...
組件 2 從 service 獲取信息
import { Service2 } from '../../service/service2.service';
...
public constructor(
public service: Service2,
) { }
public showInfo() {
console.log(this.service.info);
}
...
2、Subject（發(fā)布訂閱）
真正的發(fā)布訂閱模式，當(dāng)數(shù)據(jù)改變時(shí)，訂閱者也能得到響應(yīng),這里只舉了BehaviorSubject的例子
// Service
import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>('Start');
public changeMessage(message: string): void {
this.messageSource.next(message);
}
public getMessageSource(): Observable<string> {
return this.messageSource.asObservable();
}
/////////////////////////
// 發(fā)布
...
this.messageService.changeMessage('message change');
/////////////////////////
public
// 訂閱 (記得根據(jù)需要選擇是否取消訂閱 unsubscribe)
this.messageService.getMessageSource().subscribe(m => {
console.log(m);
})
四種主題Subject對(duì)比
Subject否否及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布BehaviorSubject是。存儲(chǔ)最后一條數(shù)據(jù)或者初始值是及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布ReplaySubject是。存儲(chǔ)所有數(shù)據(jù)否及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布AsyncSubject是。存儲(chǔ)最后一條數(shù)據(jù)是延時(shí)發(fā)布。只有當(dāng)數(shù)據(jù)源complete的時(shí)候才會(huì)發(fā)布其他通信方式
路由傳值、瀏覽器本地存儲(chǔ)（LocalStorage，SessionStorage）、cookie。
更多編程相關(guān)知識(shí)，可訪問：編程入門！！
更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問題，請(qǐng)?jiān)L問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
