Access element over the router-outlet Angular 6

问题

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

</router-outlet>

I have navigation bar at the root component. I created [navTitle] with @Input Decorator inside the side-nav component. side-nav component is placed in another component(root-component). However I want access [navTitle] and change from component which loaded inside the router-outlet acording to which component is loaded. How do I achieve that?

回答1:

You can't pass any data to router-outlet as to regular component (at the current version of Angular it's not possible, may be it will be added in the future), so the following syntax is invalid:

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

In provided case, you can use services to share data between your components, and I think, that using observable is the best way, because you will get the updated version of data realtime:

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();
  }
}

side-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();
  }
}

And any component, which is loaded in that 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);
  }
}

In such case you don't really need to pass the value from root component to side-nav, because you already have a subscription in side-nav component and you will have access to the latest value. If you need navTitle in both root and side-nav components, you can just move the logic with subscription to root.

And here is the working STACKBLITZ.