使用角度为4的嵌套路由器插座-Java 学习之路

我使用多个router-oulets来加载我的组件 . 外部路由器插座用于加载大多数基本组件，如login，home，404 . 我使用嵌套路由器插座来加载主页的子组件 . router-outlet嵌套在home.component中 .

home.component.html

<app-header></app-header>
<router-outlet name="homeRoute"></router-outlet>
<app-footer></app-footer>

app.module.ts

const appRoutes: Routes = [
  {path: '', component: HomeComponent, children: [
    {path: '', component: DashboardComponent, outlet: 'homeRouter'},
    {path: 'user', component: UserComponent, outlet: 'homeRouter'},
    {path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'}
  ]},
  {path: 'login', component: LoginformComponent},
  {path: '**', component: NotfoundComponent}
];

HomeComponent和LoginformComponent需要从外部路由器插座加载 . Home组件包含名为'homeRouter'的内部路由器插座，我想用它来加载主页的子组件 . 但内部路由器的导航不起作用 . 我尝试使用router.navigate（）方法并使用URL访问每个组件 . 但他们两个都没有按预期工作 .

有人能告诉我这段代码有什么问题 . 我检查并尝试过几个关于同一问题的问题，但没有一个工作正常 .

以下是我为不同组件尝试的URL

http://localhost:4200 dashboardComponet（这个有效）
http://localhost:4200/user userComponent（不起作用 . 路由到notFoundComponent）
http://localhost:4200/user/U001 userDetailComponent（doenst work.still route to notFoundComponent）

1 回答

你不需要为nesetd路由指定路由器插座，你可以从路由器中删除 outlet: 'homeRouter' ，从路由器插座中删除 name="homeRoute" 它应该可以工作 .

话虽如此，如果您需要多个路由器插座以便可以加载辅助路由以及主路由，则 router-oulet 的名称应与 outlet 属性相同 . 在您正在使用的路线中，您有出口：“ homeRouter " and name=" homeRoute ”，它们应该相同 .

这是一个包含多级嵌套路由的完整示例，

Plunker

import { NgModule, Component }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<h1>Hello</h1>
  <a routerLink="/" >Home</a>
   <a routerLink="/admin" >Admin</a>
    <a routerLink="/nonexistingroute" >Non existing Route</a>
  <hr />
  <router-outlet></router-outlet>
  `
})
export class AppComponent { 
}

@Component({
  template: `<h1>Home</h1>
   <a routerLink="/" >Dashboard</a>
    <a routerLink="/users" >Users</a>
  <hr />
   <router-outlet></router-outlet>
  `
})
class HomeComponent {}

@Component({
  template: `<h1>Admin</h1>
  `
})
class AdminComponent {}

@Component({
  template: `<h1>Dashboard</h1>
  `
})
class DashboardComponent {}


@Component({
  template: `<h1>Users</h1>
  <a routerLink="user/1" >User 1</a>
  <a routerLink="user/2" >User 2</a>
  <hr />
   <router-outlet></router-outlet>
  `
})
class Users {}


@Component({
  template: `<h1>User {{id}}</h1>
  `
})
class UserdetailComponent {
  id='';
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
     this.id = params['id'];
    });
  }
}

@Component({
  template: `<h1>Not found</h1>
  `
})
class NotfoundComponent {}


const appRoutes: Routes = [
  { path: '',  
    component: HomeComponent,
    children: [
       {path: '', component: DashboardComponent},
       {path: 'users', component: Users,
         children: [
           {path: 'user/:id', component: UserdetailComponent}
        ]
       }
     ]
  },
  {
    path: 'admin',
    component : AdminComponent 
  },
   {path: '**', component: NotfoundComponent}
];

@NgModule({
  imports:      [ BrowserModule,RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent, HomeComponent,AdminComponent,NotfoundComponent, DashboardComponent, Users, UserdetailComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

希望这可以帮助！！

回复于 2024-04-29T02:35:12+08:00

使用角度为4的嵌套路由器插座

1 回答

相关问题