angular - 角度路由参数

Question

如何根据路由参数的值加载不同的组件？我希望将逻辑写入路由模块。

我试过但没有找到任何关于如何在路由模块中实现它的东西。

类似的东西：如果类型是“总和” -

[path: 'detail/:type', component: SumComponent]

否则，如果类型是 'sub' -

[path: 'detail/:type', component: SubComponent]

标签： angularparametersrouting

Answer 1

嗨，是的，您可以实现它，但需要一些肮脏的技巧。就像我在这里做的一样。

在这里如何做到这一点：

首先，您需要像我在这里一样创建一个组件并将其命名为 MainComponent：

主要组件.ts

export class MainComponent implements OnInit {
 type: TypeOfDetails;
  typeOfDetail = TypeOfDetails;
  constructor(
    private route: ActivatedRoute
  ) {
    this.type = this.route.snapshot.paramMap.get('type') as TypeOfDetails;
  }

  ngOnInit() {
  }
}

main.components.html

<span [ngSwitch]="type">
  <p *ngSwitchCase="typeOfDetail.SUB">
    <app-sub></app-sub>
  </p>
  <p *ngSwitchCase="typeOfDetail.SUM">
    <app-sum></app-sum>
  </p>
  <p *ngSwitchDefault>
    <span>Sorry Not available the component</span>
  </p>
</span>

路由器代码

 const routes: Routes = [
  {
    path: 'detail/:type',
    component: MainComponent
  }
];

现在你可以传递你的路由器参数，@Input()所以它也可以工作。

如果您对代码有任何疑问，请告诉我。

快乐编码:)

这是StackBlitz 代码，这里是StackBlitz 演示