角兒童路線不變

Question

我正在設計一個帶有angular4的網站，並且有一個內部使用@ angular / material sidenav的組件。 在那邊，我有<router-outlet></router-outlet> 。

我的app.module具有所有必要的導入和聲明，我有一個app路由模塊，其中包含該組件的以下代碼：

const appRoutes: Routes = [
  { path: 'reg',
    component: RegComponent,
    children: [
        { path: ':info', component: RegInfoComponent },
        { path: ':ther', component: RegTherComponent }
    ]},
];

我有兩個span對象來打開sidenav： <span class="label label-info" [routerLink]="['/reg', 'info']" (click)=sidenav.open() style="cursor: pointer;">Info</span>

和<span class="label label-info" [routerLink]="['/reg', 'ther']" (click)=sidenav.open() style="cursor: pointer;">Ther</span>

該sidenav打開罰款，但只加載從RegInfoComponent HTML模板，如果我點擊ther鏈接，它仍然加載從RegInfoComponent HTML模板，但URL不會改變。

起初，我認為可能是因為它位於有角度的材質sidenav內，所以我將<router-outlet></router-outlet>放置在鏈接下方，並且仍然不會更改。

我不確定我做錯了什么，即路由器插座未顯示正確的子信息，希望有人可以提供幫助嗎？ 謝謝。

更新

RegInfoComponent的代碼：

import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reg-info',
  templateUrl: './reg-info.component.html',
  styleUrls: ['./reg-info.component.css']
})
export class RegInfoComponent implements OnInit {

  constructor(route: ActivatedRoute,
              router: Router) { }

  ngOnInit() {
  }

}

以及RegTherComponent的代碼

import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reg-ther',
  templateUrl: './reg-ther.component.html',
  styleUrls: ['./reg-ther.component.css']
})
export class RegTherComponent implements OnInit {

  constructor(route: ActivatedRoute,
              router: Router) { }

  ngOnInit() {
  }

}

Answer 1

我認為您的路由器配置不正確

您將變量段與:info和:ther因此第一個（ :info ）將始終首先匹配（並且RegInfoComponent被實例化），因此RegTherComponent將永遠不會被實例化

你需要做這樣的事情

<span class="label label-info" [routerLink]="['/reg/info']" (click)=sidenav.open() style="cursor: pointer;">Info</span>
<span class="label label-info" [routerLink]="['/reg/ther']" (click)=sidenav.open() style="cursor: pointer;">Ther</span>

然后路由器配置應該是

const appRoutes: Routes = [
  { path: 'reg',
    component: RegComponent,
    children: [
        { path: 'info', component: RegInfoComponent },
        { path: 'ther', component: RegTherComponent }
    ]},
];