**如下:
message.service.ts
import from '@angular/core';
import from 'rxjs/';
@injectable()
export class messageservice
private subject = new subject();
sendmessage(something: any)
clearmessage()
getmessage(): observable
}
子元件
home.component.ts
import from '@angular/core';
import from '../message.service';
@component()
export class homecomponent implements oninit
ngoninit()
sendmessage(): void
clearmessage(): void
}
home.component.html
import from '@angular/core';
import from './message.service';
import from 'rxjs/subscription';
@component()
message: any;
subscription: subscription;
constructor(private messageservice: messageservice)
ngoninit(): void );
} ngondestroy()
}
}
非父子元件見通訊可以通過同乙個service來實現。需要注意的是一定要在service中定義乙個臨時變數來供傳遞。比如我有兩個元件來傳遞乙個book
型別的資料,homecomponent
->bookcomponent
,book
和service定義如下:
import from '@angular/core';
import from 'rxjs/subject';
export class book
@injectable()
export class bookservice ;
bookeventer: eventemitter= new eventemitter();
}
主頁元件homecomponent
,它用來提供資料來源,定義如下:
@component()
export class homecomponent implements oninit, ondestroy
ngoninit() ;
} ngondestroy()
}
書籍元件bookcomponent
,用來接收資料,定義如下:
import from '@angular/core';
import from './book';
@component()
export class bookcomponent implements oninit );
} ngoninit()
}
書籍元件模板檔案定義如下:
subscribebook:}
直接訪問書籍模板對應路由的話,顯示為:
先訪問主頁再訪問書籍模板對應路由的話,顯示為:
rxjs - subject
angular 2 元件之間如何通訊?
angular2.0+ 模組之間共享service並訂閱更新
十 元件註冊
1.全域性元件註冊 1.template寫在div中通過template compnenta componenta div componenta this is component div template vue.component componenta methods newvue script...
Angular4學習筆記之管道
管道 pipes把資料作為輸入,然後轉換它,給出期望的輸出。每個應用開始的時候差不多都是一些簡單任務 獲取資料 轉換它們,然後把它們顯示給使用者。angular內建了一些管道,比如datepipe uppercasepipe lowercasepipe currencypipe和percentpip...
Angular4學習筆記 目錄彙總
angular4學習筆記 一 環境搭建 angular4學習筆記 二 在webstorm中啟動專案 angular4學習筆記 三 路由 angular4學習筆記 四 依賴注入 angular4學習筆記 五 資料繫結 響應式程式設計和管道 angular4學習筆記 六 input和output ang...