Question

我有一个子组件及其父组件。子组件包含以下管道以订阅已激活的路由：

this.route.paramMap.pipe(
  map(paramMap => +paramMap.get('id')),
  switchMap((id: number) => this.apiService.getTasks(id.toString())),
).subscribe(tasks => this.tasks = tasks);

{ path: '', component: DashboardComponent, children: [
      { path: '', redirectTo: '0', pathMatch: 'full' },
      { path: '0', component: NoListComponent },
      { path: ':id', component: ListComponent }
    ]},

如何在父组件DashboardComponent内访问此路由：id？

我问是因为我需要在父级内部使用相同的ID。我已经尝试过通过@ViewChild传递它，但这不会在路线更改时更新。

编辑：由于我正在使用路由器插座，因此无法发出事件。

Answer 1

通过修改父组件的onActivate函数，可以实现通过路由器出口进行的父子组件通信，如下所示：

onActivate(childComponent) {
    childComponent.someEventEmitter.subscribe((data) => {
    // Will receive the data from child here 
})

Child组件会照常创建EventEmitter：

export class ChildComponent {
  @Output() someEventEmitter: EventEmitter<any> = new EventEmitter();

  someFunction(data) {
    // emit data to parent component
    this.someEventEmitter.emit(data);
  }
}

在html中：

<button type="button" (click)="someFunction()">Do Something</button>

获取子路由：id

1 个答案: