Элемент доступа через роутер-выход Angular 6 - PullRequest
0 голосов
/ 02 июля 2018

<side-nav [navTitle]="navTitle"></side-nav>
<router-outlet>

</router-outlet>

У меня есть панель навигации в корневом компоненте. Я создал [navTitle] с @Input Decorator внутри компонента side-nav. side-nav компонент размещен в другом компоненте (root-component). Однако я хочу получить доступ к [navTitle] и перейти с компонента, который загружен внутри розетки маршрутизатора, в соответствии с тем, какой компонент загружен. Как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Вы не можете передать какие-либо данные в router-outlet как обычному компоненту (в текущей версии Angular это невозможно, возможно, он будет добавлен в будущем), поэтому следующий синтаксис неверен * * 1004

<router-outlet [dataToPass]="'something'"></router-outlet> 

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

data.service.ts

// Other service stuff
@Injectable()
export class DataService {
  private navTitle$: BehaviorSubject<string> = new BehaviorSubject<string>('Default nav title');

  public setNavTitle(newNavTitle: string): void {
    // Sets new value, every entity, which is subscribed to changes (`getNavTitle().subscribe(...)`) will get new value every time it changes
    this.navTitle$.next(newNavTitle);
  }

  public getNavTitle(): Observable<string> {
    // Allow to `subscribe` on changes and get the value every time it changes
    return this.navTitle$.asObservable();
  }
}

побочный nav.component.ts

// Other component stuff
export class SideNavComponent implements OnInit, OnDestroy {
  public navTitle: string = '';
  private getNavTitleSubscription: Subscription;

  constructor(private _dataService: DataService) { }

  ngOnInit() {
    // Will update the value of `this.navTitle` every time, when you will call `setNavTitle('data')` in data service
    this.getNavTitleSubscription = this._dataService.getNavTitle()
      .subscribe((navTitle: string) => this.navTitle = navTitle);
  }

  ngOnDestroy() {
    // You have to `unsubscribe()` from subscription on destroy to avoid some kind of errors
    this.getNavTitleSubscription.unsubscribe();
  }
}

И любой компонент, который загружен в этот router-outlet:

any.component.ts

// Other component stuff
export class SideNavComponent implements OnInit {
  private navTitleToSet: string = 'Any title';

  constructor(private _dataService: DataService) { }

  ngOnInit() {
    // Set title from current component
    this._dataService.setNavTitle(this.navTitleToSet);
  }
}

В этом случае вам на самом деле не нужно передавать значение из компонента root в side-nav, потому что у вас уже есть компонент subscription в side-nav, и вы получите доступ к последнему значению. Если вам нужно navTitle в обоих root и side-nav компонентах, вы можете просто переместить логику с subscription на root.

А вот и рабочий STACKBLITZ .

0 голосов
/ 02 июля 2018

Вы можете использовать сервис для связи между компонентами. Я создал короткий пример, который даст вам представление о том, как это можно сделать.

Служба, являющаяся одноэлементной, имеет только один экземпляр, и, следовательно, свойства остаются теми же.

Надеюсь, это поможет.

https://stackblitz.com/edit/angular-paziug?file=src%2Fapp%2Fapp.component.ts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...