angular 元件間傳值與通訊的方法

1 環境搭建

安裝 angular cli

npm install -g @angular/cli

npm start/ng serve --open

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

2 頁面建立

3 引數傳遞

方法1 @input 父級元件向子元件傳遞

父級元件home.ts

import  from '@angular/core';

import from '../child/child.component'; 
@component()
export class homecomponent implements oninit 
ngoninit() 
}

@component()

import  from '@angular/core';

import from '@angular/core'; 
import from '../../service/home.service'
@component()
export class childcomponent implements oninit 
ngoninit() 
}

子元件建立事件 eventemitter 物件，使用@output公開出去

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

home.component.ts

import  from '@angular/core';

import from '../child/child.component'; 
@component()
export class homecomponent implements oninit 
ngoninit() 
onlisten(arg)
}

child.component.ts

import  from '@angular/core';

import from '@angular/core'; 
@component()
export class childcomponent implements oninit 
ngoninit() 
}

一般用於父元件給子元件傳遞資訊,或者父元件呼叫子元件的方法

home.component.ts

import  from '@angular/core';

import from '../child/child.component'; 
@component()
export class homecomponent implements oninit ) child:childcomponent; 
constructor() 
ngafterviewinit() 
}

child.component.ts

import  from '@angular/core';

import from '@angular/core'; 
@component()
export class childcomponent implements oninit 
ngoninit() {}
getdata()
}

為什麼需要服務?

元件不應該直接獲取或儲存資料，它們不應該了解是否在展示假資料。 它們應該聚焦於展示資料，而把資料訪問的職責委託給某個服務。

@injectable() 服務

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

provide

在要求 angular 把服務注入到元件之前，你必須先把這個服務提供給依賴注入系統。預設情況下，angular cli 命令ng generate service會通過給 @injectable 裝飾器新增元資料的形式，用根注入器將你的服務註冊成為提供商。

@injectable()

元件home從服務獲取資料,或通過服務傳遞資料

元件child從服務獲取資料,或通過服務傳遞資料 

建立home.service.ts

ng generate service service/home

import  from '@angular/core';

import from 'rxjs'; 
@injectable()
export class homeservice 
getmessage():observable
} }

import  from '@angular/core';

import from '../child/child.component';
import from '../../service/home.service'
@component()
export class homecomponent implements oninit 
ngoninit() 
}

import  from '@angular/core';

import from '@angular/core'; 
import from '../../service/home.service'
@component()
export class childcomponent implements oninit 
ngoninit() 
}

Angular元件間傳值

在angular中，父元件呼叫子元件，可以傳遞引數，子元件根據傳遞過來的引數返回相應的資料 父元件向子元件傳參，過程如下 方法一 在子元件中 component inputs inputsvalue export class testcomponent 在父元件中 component export ...

Angular 子父元件傳值與通訊

一 父元件給子元件傳值 input 父元件不僅可以給子元件傳遞簡單的資料，還可以將自己的方法以及整個父元件傳給子元件 1.父元件呼叫子元件的時候傳入資料 2.子元件引入input模組 import from anjular core 3.子元件中 input接受父元件出過來的資料 export cl...

Angular元件傳值

父元件中，通過 屬性 值 的方式向子元件傳值 msg 子元件中，要用 inputs 屬性 來接收引數 並且angular裡，子元件可以直接修改父元件傳來的值 component export class childcomponent implements oninit ngoninit privat...