2017-01-19 9 views
0

これは単にあなたが見た中で最大の過度の過度のものになるでしょうが、これは私のレットメントのためのペットプロジェクトです。コンポーネントが表示されているときに初期化するAngular 2ライフフックがありますか?

私がしようとしていたのは、毎回ツールバーコードを繰り返すのではなく、自分のパンくずリストコンポーネントコンポーネントにユーザーの場所のパンくずリストを表示することでした。

import {Injectable} from "@angular/core"; 
import {Breadcrumb} from "./breadcrumb"; 
import {Subject} from "rxjs/Rx"; 
@Injectable() 
export class BreadcrumbService { 
    private breadcrumbs:Subject<Breadcrumb[]>; 

    constructor() { 
    this.breadcrumbs = new Subject(); 
    } 

    getBreadcrumbs():Subject<Breadcrumb[]>{ 
    return this.breadcrumbs; 
    } 

    setBreadcrumbs(breadcrumbs:Breadcrumb[]){ 
    this.breadcrumbs.next(breadcrumbs) 
    } 

} 

私は加入者にパンくずをブロードキャストする件名RxJsを使用しますので、私はBreadcrumbServiceを作成しました。 と私はそれがあまりにもパンくずリストコンポーネント

@Component({ 
    selector: 'my-breadcrumbs', 
    moduleId: module.id, 
    templateUrl: 'breadcrumb.template.html' 
}) 
export class BreadcrumbComponent implements OnInit { 

    private breadcrumbs:Breadcrumb[]; 
    private breadcrumbsSubject:Subject<Breadcrumb[]>; 

    ngOnInit() { 
    this.breadcrumbsSubject.subscribe(
     (breadcrumbs)=> { 
     this.breadcrumbs = breadcrumbs; 
     }); 

    let breadcrumbs:Breadcrumb[] = [new Breadcrumb("HOME", ["/"])]; 
    this.breadcrumbService.setBreadcrumbs(breadcrumbs); 
    } 

    constructor(private breadcrumbService:BreadcrumbService) { 
    this.breadcrumbsSubject = this.breadcrumbService.getBreadcrumbs(); 
    } 

} 

を宣言し、私の​​他のコンポーネント

export class FolderComponent implements OnInit { 
    private breadcrumbs:Breadcrumb[]; 
    constructor(*other services*, private breadcrumbService:BreadcrumbService) { 
    } 
    ngOnInit(){ 
    getBreadcrumbs(); 
    } 
    getBreadcrumbs():void { 
    //some code 
    this.breadcrumbService.setBreadcrumbs(breadcrumbs); 
    } 

にそれを注入し、私もBreadcrumbModule

import {BreadcrumbService} from "./breadcrumb.service"; 
import {BreadcrumbComponent} from "./breadcrumb.component"; 
import {CommonModule} from "@angular/common"; 
import {MaterialModule} from "@angular/material"; 
import {AppRoutingModule} from "../app-routing.module"; 
@NgModule({ 
    imports: [ 
    MaterialModule.forRoot(), 
    CommonModule, 
    AppRoutingModule 
    ], 
    declarations: [BreadcrumbComponent], 
    providers: [BreadcrumbService], 
    exports: [BreadcrumbComponent] 
}) 
export class BreadcrumbModule { 

} 

を作成したシングルトンだから彼らも必要ですので、ブレッドクラムをあなたの必要性に変えることができます。問題は、コンポーネントがdiであるたびにonInit()lifehookが呼び出されると思っていたことですそれは建設中に一度だけ呼び出されているようだ。

はい、これはばかげていますが、将来的に私が次のようなものが必要な場合に備えて知りたいことがあります。表示されるたびにコンポーネント内の関数を呼び出す方法はありますか?それらの神々のブレッドクラムに対処する最善の方法

答えて

3

私はルートアプリケーションコンポーネントとリスニングルートでそれをやります。 @Inputとして子ディレクティブにデータを渡し、異なる経路間でブレッドクラムディレクティブのインスタンスを乗じて、しかし、私は、これはまた有用いつかかもしれないと思う:

export class AppComponent { 
    constructor(private router: Route, private breadcrumbService:BreadcrumbService) { 
     router.events.subscribe((val) => { 
      // see also 
      this.breadcrumbService.setBreadcrumbs(breadcrumbs); 
     }); 
    } 
    title = "app works!"; 
} 
+0

はいおかげで、私はこの伝統的な方法で解決しています。 –

関連する問題