javascript - 通过路由器导出 Angular 6 访问元素

Question

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

</router-outlet>

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

Answer 1

对于常规组件，您不能将任何数据传递给 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();
  }
}

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

以及加载到该 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 组件中，您将可以访问最新的值。如果您在 root 和 side-nav 组件中都需要 navTitle，您只需将带有 subscription 的逻辑移动到root.

这是工作 STACKBLITZ .