我正在设计一个带有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() {
  }

}

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

回复于 2024-05-17T09:55:24+08:00

角度儿童路线不变

更新

1 回答

相关问题