angular 組件間傳值與通信的方法

1 環境搭建

安裝 Angular CLI

npm install -g @angular/cli

ng newmy-app

cd my-app

npm start/ng serve --open

ng serve 命令會啟動開發服務器、監視文件，並在這些文件發生更改時重建應用。

--open（或者只用 -o 縮寫）選項會自動打開你的瀏覽器，並訪問 http://localhost:4200/。

2 頁面創建

ng generate component view/home

ng generate component view/child

3 參數傳遞

方法1 @Input父級組件向子組件傳遞

父級組件home.ts import {Component, OnInit, ViewChild } from '@angular/core';import {ChildComponent} from '../child/child.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})exportclass HomeComponent implements OnInit { goChild = '23456' constructor() { } ngOnInit() { } }父級組件home.html.ts <app-child>app-child是在home.component.ts生成組件時，默認生成的。下邊代碼的selector @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})子組件child.component.ts import {Component, OnInit, Output, Input } from '@angular/core';import {Injectable,EventEmitter} from '@angular/core'; import {HomeService} from '../../service/home.service' @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})exportclass ChildComponent implements OnInit { @Input() fromParentData; constructor() {} ngOnInit() { console.log(this.fromParentData) } }

方法2 EventEmitter, @output 子組件傳遞消息給父組件

子組件創建事件 EventEmitter 對象，使用@output公開出去

父組件監聽子組件@output出來的方法，然後處理事件

home.component.ts import {Component, OnInit, ViewChild } from '@angular/core';import {ChildComponent} from '../child/child.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})exportclass HomeComponent implements OnInit { constructor() { } ngOnInit() { } onListen(arg){ console.log(arg) } }home.component.html <app-child>child.component.ts import {Component, OnInit, Output, Input } from '@angular/core';import {Injectable,EventEmitter} from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})exportclass ChildComponent implements OnInit { @Input() fromParentData; @Output() changeNumber:EventEmitter<number> = new EventEmitter(); constructor(private message:HomeService ) {} ngOnInit() { console.log(this.fromParentData) this.changeNumber.emit(1) } }
/<number>

方法3 使用 @ViewChild

一般用於父組件給子組件傳遞信息,或者父組件調用子組件的方法

home.component.ts import {Component, OnInit, ViewChild } from '@angular/core';import {ChildComponent} from '../child/child.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})exportclass HomeComponent implements OnInit { @ViewChild(ChildComponent, {static: false})child:ChildComponent; constructor() { } ngAfterViewInit() { this.child.getData(); } }home.component.html <app-child>child.component.ts import {Component, OnInit, Output, Input } from '@angular/core';import {Injectable,EventEmitter} from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})exportclass ChildComponent implements OnInit { constructor() {} ngOnInit() {} getData(){ console.log('child methods') } }

方法4 service進行通訊，兩個組件同時注入某個服務

為什麼需要服務?

組件不應該直接獲取或保存數據，它們不應該瞭解是否在展示假數據。它們應該聚焦於展示數據，而把數據訪問的職責委託給某個服務。

@Injectable() 服務

@Injectable()裝飾器。它把這個類標記為依賴注入系統的參與者之一

provide

在要求Angular 把服務 注入到組件之前，你必須先把這個服務提供給依賴注入系統。默認情況下，Angular CLI 命令 ng generateservice 會通過給 @Injectable 裝飾器添加元數據的形式，用根注入器將你的服務註冊成為提供商。

@Injectable({ providedIn: 'root',})

新建一個服務home.service.ts,組件home和組件child同時注入該服務

組件home從服務獲取數據,或通過服務傳遞數據

組件child從服務獲取數據,或通過服務傳遞數據

創建home.service.ts nggenerate service service/homeimport {Injectable } from '@angular/core'; import {Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root'})exportclass HomeService { messages: string[] = ['12']; add(message: string) { console.log(message) this.messages.push(message); } getMessage():Observable { return of(this.messages); // return {this.messages} } }home.component.ts import {Component, OnInit, ViewChild } from '@angular/core';import {ChildComponent} from '../child/child.component'; import {HomeService} from '../../service/home.service' @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})exportclass HomeComponent implements OnInit { arr : string[] = []; constructor(private message:HomeService) {} ngOnInit() { this.arr = this.message.getMessage(); console.log(this.arr) } }child.component.ts import {Component, OnInit, Output, Input } from '@angular/core';import {Injectable,EventEmitter} from '@angular/core'; import {HomeService} from '../../service/home.service' @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})exportclass ChildComponent implements OnInit { constructor(private message:HomeService ) {} ngOnInit() { //組件發送消息3 this.message.add('3'); // 組件接收消息 const b = this.message.getMessage(); console.log('組件接收消息'+b) } }