通过路由器出口访问元素 Angular 6

Question

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

</router-outlet>

我在根组件上有导航栏。我在 side-nav 组件中使用 @Input 装饰器创建了 [navTitle]。 side-nav 组件被放置在另一个组件中（root-component）。但是我想访问 [navTitle] 并根据加载的组件从加载到路由器插座内的组件进行更改。我该如何实现？

Answer 1

您可以使用服务在组件之间进行通信。我创建了一个简短的示例，可以让您大致了解如何完成。

服务是单例，只有一个实例，因此属性保持不变。

希望对您有所帮助。

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

Answer 2

对于常规组件，您不能将任何数据传递给router-outlet（在Angular的当前版本中这是不可能的，可能会在将来添加），所以以下语法是无效:

<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，因为您在 side-nav 组件中已经有一个 subscription 并且您将获得最新的价值。如果您在 root 和 side-nav 组件中都需要 navTitle，您可以将带有 subscription 的逻辑移动到 root。

这是工作 STACKBLITZ。

通过路由器出口访问元素 Angular 6

Access element over the router-outlet Angular 6

javascript

typescript

angular

angular6