Маршрутные параметры в угловых

Question

Как я могу загрузить другой компонент в зависимости от значения параметра маршрутизации?Я хочу, чтобы логика была записана в модуле маршрутизации.

Я пытался, но не нашел ничего о том, как реализовать это в модуле маршрутизации.

Что-то вроде: если type это 'sum' -

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

else, если type это 'sub' -

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

Answer 1

Привет Да, вы можете достичь этого, но с некоторыми грязными трюками.Как то, что я делаю здесь.

Вот как это сделать:

Сначала вам нужно создать компонент, как я, и назвать его как 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 и вот демоверсия StackBlitz

Answer 2

это невозможно сделать.

в вашем случае вы не можете сделать что-то вроде этого:

1.создать другой компонент.

2.добавить это к маршруту.

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

3.ing nnOnInit проверить значение типа и перенаправить на ваш компонент

Answer 3

это невозможно сделать, иначе вы можете сделать дочернюю маршрутизацию используйте дочернюю маршрутизацию здесь

Answer 4

Если тип не является динамическим, просто установите тип без флага param, например:

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