Вы не можете передать какие-либо данные в 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 .