Angular：如何根据父应用程序组件的路由更改重新呈现子组件？

Question

我的应用程序呈现了一个项目组件，其中包含来自URL的给定ID的信息，例如my.app/project/foo。

应用组件：

• 使用<router-outlet>渲染项目组件
• 包含所有项目的列表以便导航到每个项目

问题是：单击链接时，路由会正确更改为项目ID，但是项目组件不会基于新ID再次重新呈现。重新加载后，项目组件将正确呈现，但单击另一个ID后将无法呈现。

app.routing.module.ts：

const routes: Routes = [
...
  {
    path: 'project/:key',
    loadChildren: () =>
      import('../project-page/project-page.module').then(
        m => m.ProjectPageModule
      )
  }
...
];

app.component.html：

<a routerLink="/project/{{ project.id }}" *ngFor="let project of projects">
  {{ project.name }}
</a>
...
<div class="content">
  <router-outlet></router-outlet>
</div>

project-page.component.ts（在ProjectPageModule中：）]

export class ProjectPageComponent implements OnInit {

  project: any;

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');

    return this.projectService
      .getProjectById(id)
      .pipe(delay(1000) /* debug only */)
      .subscribe(response => this.project = response);
    );
  }
  ...
}
project-page.component.html：

<h1>{{ project.id }}</h1>
我不确定是否

• app组件应“触发”项目组件的新渲染，或者可能将URL的id参数作为“输入”传递给项目组件...或...
• project
组件应该以与当前使用路由快照的实现不同的方式侦听路由更改。

你怎么看？

我的应用程序呈现了一个项目组件，其中包含来自URL的给定ID的信息，例如my.app/project/foo。应用程序组件：使用渲染项目组件...

Answer 1

您应分隔路线，以便app.routing.module仅包含：