更新

Question

我正在设计一个带有angular4的网站，并且有一个内部使用@ angular / material sidenav的组件。在那个sidenav我有<router-outlet></router-outlet>。

我的app.module有所有必要的导入和声明，我有一个app-routing模块，其中包含组件的以下代码：

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 }
    ]},
];

角度儿童路线不变

更新

1 个答案: