角儿童路线不变 [英] Angular Child Route not changing

问题描述

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

I am designing a website with angular4, and have a component that inside uses the @angular/material sidenav. Within that sidenav i have <router-outlet></router-outlet>.

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

my app.module has all the necessary imports and declarations, I have a app-routing module that contains the following code for the component:

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"，信息"]"(click)= sidenav.open()style ="cursor:pointer;"> Info</span>

I have two span objects to open the 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确实会更改.

The sidenav opens fine, but only loads the html template from RegInfoComponent, if i click the ther link, it still loads the html template from RegInfoComponent, but the URL does change.

起初，我认为可能是因为它位于有角材质sidenav内，所以我将< router-outlet></router-outlet> 放置在链接下方，但仍然不会改变.

At first i thought it was maybe because its inside the angular material sidenav, so i placed the <router-outlet></router-outlet> below the link, and it still wouldnt change.

我不确定我做错了什么，即路由器插座未显示正确的子信息，希望有人可以提供帮助吗?谢谢.

I'm not sure what i've done wrong that the router-outlet is not displaying the correct child information, hoping somebody can help with this? Thanks.

RegInfoComponent的代码:

The code for 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的代码

and the code for the 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() {
  }

}

推荐答案

我认为您的路由器配置不正确

I think your router config is incorrect

您将变量段与:info 和:ther 一起使用，因此第一个(:info )将始终最先匹配(并且RegInfoComponent被实例化)，因此 RegTherComponent 将永远不会被实例化

you are using variable segments with :info and :ther so the first one (:info) will always match first (and the RegInfoComponent gets instantiated), and therefore RegTherComponent will never be instantiated

您需要执行类似的操作

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

这篇关于角儿童路线不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！