如何发出路由器事件答案

【问题标题】：How to emit router event如何发出路由器事件
【发布时间】：2018-07-06 13:14:57
【问题描述】：

我有 2 个模块，一个是 sidenav，我可以在其中选择菜单并希望在 content module 中显示组件，其中有 router-outlet。我想知道最好的方法是什么？有一些router event 我可以在内容模块中使用subscribe 吗？因为我将使用service 到emit 组件和subscribe event in router-outlet 组件，但我想这不是最佳实践。类似的东西：

Service:
private emit = EventEmitter<string>
emit(component: string): void {
 this.emit.emit(component)
}

在组件中，我只需订阅service emit 并使用router.navigate 在router-outlet 中显示组件。希望有人可以帮助我=）。谢谢

【问题讨论】：

标签： javascript angular router eventemitter router-outlet

【解决方案1】：

如果我没听错的话：

Sidenav

@Output() navigate: EventEmitter<string[]> = new EventEmitter();

emit (route: string[]) {
  this.navigate.emit(route);
}

sidenav 的父级

<app-sidenav (navigate)="router.navigate($event)"></app-sidenav>

记得在父组件中公开路由器：

constructor(public router: Router) {}

【讨论】：

【解决方案2】：

子组件 HTML

<app-child
[formGroup]="formChild"
(navigate)="onNavigate($event)"
></app-child>

@Output() navigate: EventEmitter<string[]> = new EventEmitter();
  route = ['yourUrl'];


  onNavigate(route: string[]) {
    this.route = route;
    this.navigate.emit(route);
    //console.log(route);
  }

父组件

goBack(){
    this.router.navigate(['yourRoute']);
  }

希望对您有所帮助！

【讨论】：