刷新HTML组件角度6

Question

我正在使用角度6，并且具有以下组件

在ngOnInit上具有此代码的MainComponent.ts：

ngOnInit() {
   console.log('OnInit');    
   this.route.params.subscribe(params => {
     if (params['id'] != null) {
       this.id= params['id']
     }
   });
 }

然后是MainComponent.HTML上的内容

<DataComponent [id]="id"></DataComponent>
<TableComponent [id]="id"></TableComponent>
<FieldComponent [id]="id"></FieldComponent>

路线是：http://localhost:4200/Data/77

在我需要克隆或更改ID之前，一切都很好，因此我需要MainComponent刷新所有ID。我做了以下代码：

this.router.navigate(['/Data', result.id_cloned_data]);

URL更改为例如：http://localhost:4200/Data/399，但是MainComponent不刷新。我做了一个EventEmitter，将新的ID传递给MainComponent，但是它仍然不起作用，我已经在AppRoutes上尝试过onSameUrlNavigation：'reload'。

我在做什么错？它不是要重载，所以每个组件都从API调用其Get吗？

Answer 1

变量1：

public bookId$: Observable<string> // 'id' is bad name for variable, remember about code readability;

ngOnInit() {  
    this.bookId$ = this.activatedRoute.paramMap.pipe(
      map((param) => {
        return param.get('BOOK_ID');
      }),
    );
 }

组件模板：

<DataComponent [bookId]="bookId$ | async"></DataComponent>
<TableComponent [bookId]="bookId$| async"></TableComponent>
<FieldComponent [bookId]="bookId$ | async"></FieldComponent>.

变种2：

1] DataComponent模板：

<router-outlet></router-outlet>

2）路由器配置示例：

  {
    children: [
      {
        component: DataChildComponent,
        path: ':BOOK_ID',
      },
    ],
    component: DataComponent,
    path: 'Data',
  },

3] DataChildComponent模板：

<DataComponent [bookId]="bookId$ | async"></DataComponent>
<TableComponent [bookId]="bookId$| async"></TableComponent>
<FieldComponent [bookId]="bookId$ | async"></FieldComponent>

4）DataChildComponent：

public bookId$: Observable<string>;

ngOnInit() {  
    this.bookId$ = this.activatedRoute.paramMap.pipe(
      map((param) => {
        return param.get('BOOK_ID');
      }),
    );
 }

希望有帮助！