Angular父子元件通過服務傳參

今天在使用ngx-translate做多語言的時候遇到了乙個問題，需要在登入頁面點選按鈕，然後呼叫父元件中的乙個方法。

一開始想到了@input和@output，然而由於並不是單純的父子元件關係，而是包含路由的父子元件關係，所以並不能使用@input方法和@output方法。

然後去搜尋一下，發現stackoverflow上有答案，用的是service來進行傳參，發現很好用，所以和大家分享一下。

首先，建立乙個service.

shared-service.ts

import  from '@angular/core';

import from 'rxjs/subject';
@injectable()
export class sharedservice 
}

然後把這個service分別注入父元件和子元件所屬的module中，記得要放在providers裡面。

然後把service再引入到父子元件各自的component裡面。

子元件通過onclick方法傳遞引數：

child.component.ts

import  from '@angular/core';

@component()
export class childcomponent 
onclick()
}

父元件通過服務接收引數：

parent.component.ts

import  from '@angular/core';

@component()
export class parentcomponent );
}}

Angular元件 父子元件通訊

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

angular 父子元件通訊

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

angular 父子元件通訊

1.子元件呼叫父元件的方法和資料 input 裝飾器 1.fathercomponent.html中 tochildstr 父元件中定義的資料 fathermethod 父元件中的方法 fathercomponent 父元件本身，this指代父元件例項，通過 fathercompoent 將父元件例...