Question

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

我尝试过，但是在路由模块中如何实现这一点一无所获。

类似：如果类型为'sum'-

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

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

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

Answer 1

如果类型不是动态的，只需设置没有参数标志的类型，例如：

[path: 'detail/sum', component: SumComponent]
[path: 'detail/sub', component: SubComponent]

Answer 2

不可能那样做。

在您的情况下，您无法执行以下操作：

1。创建另一个组件。

2。将此添加到路由。

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

3.in ngOnInit检查类型值并重定向到您的组件

Answer 3

这是不可能的，否则你可以进行子路由 use child routing here

Answer 4

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

如何执行此操作：

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

main.component.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 Code，这里是StackBlitz Demo

以角度路由参数

4 个答案: