Angular元件之間通訊

元件之間會有下列3種關係:

1. 父子關係

2. 兄弟關係

3. 沒有直接關係

通常採用下列方式處理(某些方式是框架特有)元件間的通訊,如下:

1父子元件之間的互動(@input/@output/模板變數/@viewchild)

2非父子元件(service/localstorage)

3還可以利用session等伺服器端的解決方法

1、父子元件之間的通訊

@input：是屬性繫結，父元件向子元件傳遞資料

@output：是事件繫結，子元件向父元件傳遞資料的同時觸發事件

1.1在父元件設定子元件上面的的屬性

通過@input繫結子元件的屬性,注意屬性得是公開public的,私有private屬性是無法傳遞的

es6新語法get/set.為屬性提供了乙個方便習慣的讀/寫方式, 攔截屬性的訪問行為。

在父元件設定該屬性,就能夠通過set方法來修改,從而實現在父元件設定子元件屬性

子元件

import  from

'@angular/core';
@component()
export 
class
childcomponent implements oninit 
get childtitle(): string
constructor() 
ngoninit() 
}

父元件

import  from

'@angular/core';
@component()
export 
class
parentandchildcomponent implements oninit 
ngoninit() 
}

1.2父元件直接呼叫子元件的方法

通過模板內部定義子元件變數,在父元件上可以直接呼叫子元件的方法,如下:

子元件

import  from

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

父元件

import  from

'@angular/core';
@component()
export 
class
parentandchildcomponent implements oninit 
ngoninit() 
}

1.3父元件接受子元件派發的事件

通過@output在子元件繫結乙個事件發射器,在父元件通過事件繫結監聽該事件

這樣在子元件派發乙個事件,父元件就能夠收到

子元件

import  from

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

父元件

import  from

'@angular/core';
@component()
export 
class
parentandchildcomponent implements oninit 
ngoninit() 
accept(msg:
string
) }

2、沒有直接關係的元件

2.1service

做乙個全域性單例的service,然後多個元件共享這個例項,當然就可以共享其中的成員,來進行通訊。

只需將service注入到元件中就可在元件中使用該service中提供的變數和方法。

2.2路由傳值

對於2個不同路由的元件,我們也可以通過路由傳遞資訊

假設2個路由分別為~/home,~/about

2.2.1傳遞乙個值

url: /about/:id

"

['/about',1]
">跳轉

獲取傳入的值：

this.id = this.route.snapshot.params['id'];

2.2.2傳遞乙個物件

類似於上述的傳遞乙個值,但是不需要再路由末尾加上/:id

url: /about

"

['/about']
" [queryparams]="
">跳轉

this.route.queryparams.subscribe((params: params)=>));

}getdata()

3.2服務端處理

也可以在服務端來處理元件間的通訊問題,通過介面呼叫儲存或獲取資料

**：

Angular元件 父子元件通訊

angular元件間通訊 元件之間松耦合，元件之間知道的越少越好。元件4裡面點選按鈕，觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...

angular 父子元件通訊

父元件不僅可以給子元件傳遞簡單的資料，還可以把自己的方法以及整個父元件傳給子元件 子元件獲取父元件的 msg 資料 父元件呼叫子元件的時候傳入資料 msg msg 子元件引入 input 模組 import from angular core 子元件中 input 接收父元件傳過來的資料 expor...

Angular學習 元件通訊

父元件不僅可以給子元件傳遞簡單的資料，還可以把自己的方法及整個父元件傳給子元件。1 父元件呼叫子元件的時候傳入資料 2 子元件引入input模組 3 子元件中 input接收父元件傳過來的資料 如果要將整個父元件傳給子元件，可以把this傳過去 如果父元件有haha屬性，可以在子元件裡直接使用thi...