溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Angular中組件間通訊的實現方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
組件間三種典型關系：
父好組件之間的交互（@Input/@Output/模板變量/@ViewChild）
非父子組件之間的交互（Service/localStorage）
還可以可以利用 Session、 路由參數來進行通訊等
相關教程推薦：《angular教程》
子組件編寫
child.component.ts
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
private _childTitle = '我是子組件';
@Input()
set childTitle(childTitle: string) {
this._childTitle = childTitle;
}
get childTitle(): string {
return this._childTitle;
}
@Output()
messageEvent: EventEmitter<string> = new EventEmitter<string>();
constructor() { }
ngOnInit(): void {
}
sendMessage(): void {
this.messageEvent.emit('我是子組件');
}
childFunction(): void {
console.log('子組件的名字是：' + this.childTitle);
}
}child.component.html
<div class="panel panel-primary">
<div class="panel-heading">{{childTitle}}</div>
<div class="panel-body">
<button (click)="sendMessage()" class="btn btn-success">給父組件發消息</button>
</div>
</div>父組件
parent-and-child.component.ts
@Component({
selector: 'app-parent-and-child',
templateUrl: './parent-and-child.component.html',
styleUrls: ['./parent-and-child.component.css']
})
export class ParentAndChildComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
doSomething(event: any): void {
alert(event);
}
}parent-and-child.component.html
<div class="panel panel-primary"> <div class="panel-heading">父組件</div> <div class="panel-body"> <app-child #child (messageEvent) = "doSomething($event)"></app-child> <button (click)="child.childFunction()" class="btn btn-success">調用子組件的方法</button> </div> </div>
@Input 屬性綁定是單向的，父組件的屬性變化會影響子組件的屬性變化， 子組件的屬性變化不會反過來影響父組件的的屬性變化。
不過，可以利用 @Input() 和 @Output() 實現屬性的雙向綁定。
@Input() value: string; @Output() valueChange: EventEmitter<any> = new EventEmitter(); // 實現雙向綁定 <input [(value)] = "newValue"></input>
注意： 使用 [()] 進行雙向綁定時，輸出屬性名必須是輸入屬性名與 Change 組成， 形如： xxxChange。
使用 Service 進行交互
event-bus.service.ts
/**
* 用于充當事件總線
*/
@Injectable()
export class EventBusService {
evnetBus: Subject<string> = new Subject<string>();
constructor() { }
}child1.component.ts
@Component({
selector: 'app-child1',
templateUrl: './child1.component.html',
styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
constructor(private eventBusService: EventBusService) { }
ngOnInit(): void {
}
triggerEventBus(): void {
this.eventBusService.evnetBus.next('child1 觸發的事件');
}
}child1.component.html
<div class="panel panel-primary"> <div class="panel-heading">child1 組件</div> <div class="panel-body"> <button (click)="triggerEventBus()" class="btn btn-success">觸發事件</button> </div> </div>
child2.component.ts
@Component({
selector: 'app-child2',
templateUrl: './child2.component.html',
styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
events: Array<string> = new Array<string>();
constructor(private eventBusService: EventBusService) { }
ngOnInit(): void {
this.listenerEvent();
}
listenerEvent(): void {
this.eventBusService.evnetBus.subscribe( value => {
this.events.push(value);
});
}
}child2.component.html
<div class="panel panel-primary">
<div class="panel-heading">child2 組件</div>
<div class="panel-body">
<p *ngFor="let event of events">{{event}}</p>
</div>
</div>brother.component.ts
@Component({
selector: 'app-brother',
templateUrl: './brother.component.html',
styleUrls: ['./brother.component.css']
})
export class BrotherComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}brother.component.html
<div class="panel panel-primary"> <div class="panel-heading">第二種：沒有父子關系的組件間通訊</div> <div class="panel-body"> <app-child1></app-child1> <app-child2></app-child2> </div> </div>
使用 localStorage 進行交互
local-child1.component.ts
@Component({
selector: 'app-local-child1',
templateUrl: './local-child1.component.html',
styleUrls: ['./local-child1.component.css']
})
export class LocalChild1Component implements OnInit {
constructor() { }
ngOnInit(): void {
}
writeData(): void {
window.localStorage.setItem('message', JSON.stringify({name: 'star', age: 22}));
}
}local-child1.component.html
<div class="panel panel-primary"> <div class="panel-heading"> LocalChild1 組件</div> <div class="panel-body"> <button class="btn btn-success" (click)="writeData()">寫入數據</button> </div> </div>
local-child2.component.ts
@Component({
selector: 'app-local-child2',
templateUrl: './local-child2.component.html',
styleUrls: ['./local-child2.component.css']
})
export class LocalChild2Component implements OnInit {
constructor() { }
ngOnInit(): void {
}
readData(): void {
const dataStr = window.localStorage.getItem('message');
const data = JSON.parse(dataStr);
console.log('name:' + data.name, 'age:' + data.age);
}
}local-child2.component.html
<div class="panel panel-primary"> <div class="panel-heading">LocalChild2 組件</div> <div class="panel-body"> <button class="btn btn-success" (click)="readData()">讀取數據</button> </div> </div>
local-storage.component.ts
@Component({
selector: 'app-local-storage',
templateUrl: './local-storage.component.html',
styleUrls: ['./local-storage.component.css']
})
export class LocalStorageComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}local-storage.component.html
<div class="panel panel-primary"> <div class="panel-heading">第三種方案：利用 localStorge 通訊</div> <div class="panel-body"> <app-local-child1></app-local-child1> <app-local-child2></app-local-child2> </div> </div>
最后，關于使用 Session、路由參數實現數據交互的方式，這里就不演示了。
以上是“Angular中組件間通訊的實現方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
