Angular4學習筆記(十) 元件間通訊

2021-09-07 15:43:19 字數 2111 閱讀 4882

**如下:

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->bookcomponentbook和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...