Блог

Я пытаюсь выполнить маршрутизацию на основе выпадающего значения, а также я хочу добавить свой новый html в существующий html. Например, у меня есть компонент main.ts и main.html и второй компонент submain.ts и submain.html . В моем main.ts у меня есть список —

 routes = [
    {
      value: 'process1',
      display: 'Process1'
    },
    {
      value: 'process2',
      display: 'process2'
    }
  ]
 onActivate(event) {
    console.log("insde activate ")
    if (event instanceof Test2Component) {
      this.currentRoute = 'react';
    } 
  }

  ngOnInit() {
    this.currentRoute = '';
  }
  routeTo(e) {
    console.log('something change')
    this.router.navigate(['/'   e]);
  }
  

В моем main.html:

   <select [(ngModel)]="currentRoute" (change)="routeTo(currentRoute)">
    <option *ngFor="let r of routes" [ngValue]="r.value">{{r.display}}</option>
  </select>
<router-outlet (activate)="onActivate($event)"></router-outlet>
  

Текущий URL-адрес является основным, но я хочу изменить URL на:

 main/process1                         // if process1 selected...    
main/process2                         // if process2 selected...
  

И выпадать, чтобы быть там (main.html ) вместе с моим submain.html содержимое, для которого я использую router-outlet.
Однако всякий раз, когда я выбираю какое-либо значение, он сообщает «Ошибка: не удается сопоставить какие-либо маршруты. Сегмент URL: ‘process1′». Я считаю, что проблема связана с маршрутизацией. Я добавил следующее в свое приложение.routing-modules.ts:

 {path:'main',component:MainComponent,pathMatch:'full'}
  

Любая помощь приветствуется!