Angular Router - 具有相同组件的两条路由

Question

我有以下路线导航到数据输入屏幕：

{
   path: 'model/:model',
   component: modelComponent,
}

该路线可以在导航系统上的多个项目之间共享：

从导航的角度来看，它工作得很好，但很明显，两个模型的数据是相同的。我正在尝试找出一种为每个屏幕克隆 modelComponent 的方法。有什么想法吗？

谢谢

Answer 1

尝试使用带有解析的路径 首先创建一个像这样的解决方案：

@Injectable()
export class ModelResolver implements Resolve<any> {
  constructor(private dataService: YourDataService) {}

  resolve(route: ActivatedRouteSnapshot) {
    const model = route.paramMap.get('model');
    return this.dataService.getModelData(model);
  }
}

您可以创建一个包装 modelComponent 的动态组件。这个动态组件将接收解析后的数据并将其传递给 modelComponent。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'dynamic-model-component',
  template: '<modelComponent [data]="resolvedData"></modelComponent>',
})
export class DynamicModelComponent {
  @Input() resolvedData: any;
}

最后将其添加到您的路由路径中

{
  path: 'model/:model',
  resolve: {
    resolvedData: ModelResolver,
  },
  component: DynamicModelComponent,
}

修改您的 modelComponent 以接受数据作为输入： 在您的 modelComponent 中，确保它可以接受数据作为输入，以便可以将解析后的数据传递给它。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'modelComponent',
  template: '<div>{{ data }}</div>',
})
export class ModelComponent {
  @Input() data: any;
}