Какое лучшее решение в Angular 2 для обновления значения компонента при переходе на другую страницу?

Question

Таким образом, я получил эти раскладки (DIVs)

-mainContainer 
--header 
--statusBar 
--main (which contains router-outlet) 
--footer 

При изменении страницы/маршрута с использованием «this.router.navigate (...)» единственное, что изменить это внутри DIV.main, но Мне нужно обновить некоторую переменную в statusBar. Так что самый лучший способ (оба работают)

1) с использованием OnChanges():

import {Component, OnInit, Input, OnChanges} from '@angular/core'; 

@Component({ 
    selector: 'status-bar', 
    templateUrl: './status-bar.html', 
    styleUrls: ['./status-bar.scss'], 

}) 

export class StatusBarComponent implements OnChanges { 

    @Input() location; 
    private statuses: boolean[]; 
    signupComplete: string = '/secure/signup-complete'; 

    constructor() {} 

    ngOnChanges() { 
    this.statuses = []; 
    this.checkStatus(); 
    } 

    get status() { 
    return this.statuses; 
    } 

    checkStatus() { 
    this.statuses.push('/secure/signupBegin' === this.location); 
    this.statuses.push('/secure/signupTwo' === this.location); 
    this.statuses.push('/secure/confirm-id' === this.location); 
    this.statuses.push('/secure/kyc-failed' === this.location); 
    this.statuses.push('/secure/select-card' === this.location); 
    this.statuses.push('/secure/custom-card' === this.location); 
    this.statuses.push('/secure/signup-complete' === this.location); 
    } 
} 

2) с использованием @Input():

import {Component, OnInit, Input} from '@angular/core'; 

@Component({ 
    selector: 'status-bar', 
    templateUrl: './status-bar.html', 
    styleUrls: ['./status-bar.scss'], 

}) 

export class StatusBarComponent implements OnInit { 

    private _location; 
    @Input('location') set location(data) { 
     this._location = data; 
     this.checkStatus(); 
    } 
    get location() { return this._location; } 
    private statuses: boolean[]; 
    signupComplete: string = '/secure/signup-complete'; 
    constructor() { 
     this.statuses = []; 
    } 

    get status() { 
     return this.statuses; 
    } 

    checkStatus() { 
     this.statuses = []; 
     this.statuses.push('/secure/signupBegin' === this.location); 
     this.statuses.push('/secure/signupTwo' === this.location); 
     this.statuses.push('/secure/confirm-id' === this.location); 
     this.statuses.push('/secure/kyc-failed' === this.location); 
     this.statuses.push('/secure/select-card' === this.location); 
     this.statuses.push('/secure/custom-card' === this.location); 
     this.statuses.push('/secure/signup-complete' === this.location); 
    } 
} 

Answer 1

Вы должны использовать службу , Это единственный способ обеспечить связь компонентов с компонентами через маршрутизатор или также называется связью для родственных связей. Вот несколько вещей, которые могут вам помочь ...

1. официальные угловые документы об услугах here. Это, безусловно, лучший способ.
2. А вот plunker от другого ответа, где я использую сервис для передачи информации компонента нава пока в router-outlet
3. Других вариантов будет включать эмиттер события или предмет (примеры всех условий на угловой официальном сайте ссылке, что Я предусмотрел выше)