web-dev-qa-db-ja.com

angular 4でネストされたルーターアウトレットを使用する

複数のrouter-ouletsを使用してコンポーネントをロードしています。外側のルーターアウトレットを使用して、login、home、404などの最も基本的なコンポーネントを読み込みます。ネストしたルーターアウトレットを使用して、ホームページのサブコンポーネントを読み込みました。そのルーターアウトレットは、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は、外部ルーターアウトレットからロードする必要があります。ホームコンポーネントには、「homeRouter」という名前の内部ルーターアウトレットが含まれています。これを使用して、ホームページのサブコンポーネントをロードします。ただし、内部ルーターのナビゲーションは機能しません。 router.navigate（）メソッドとURLを使用して各コンポーネントにアクセスしようとしました。しかし、どちらも期待どおりに機能しませんでした。

誰かがこのコードのどこが悪いのか教えてもらえますか？私は同じ問題について以前の質問をいくつか調べて試しましたが、どれもうまくいきませんでした。

さまざまなコンポーネントで試したURLは次のとおりです

  1. http://localhost:4200 dashboardComponet（これは機能します）
  2. http://localhost:4200/user userComponent（機能しません。notFoundComponentにルーティングします）
  3. http://localhost:4200/user/U001 userDetailComponent（notFoundComponentへのwork.stillルートを行います）
angularangular2-routingnested-routesrouter-outlet
8
LSampath

nesetdルートに名前付きルーターアウトレットは必要ありません。削除できますoutlet: 'homeRouter'ルートからname="homeRoute" from the router-outlet and it it should work。

とは言っても、プライマリルートと共に補助ルートをロードできるように複数のルーターアウトレットが必要な場合は、router-ouletはoutletプロパティと同じである必要があります。使用しているルートにアウトレットがあります： "homeRouter"およびname = "homeRoute」、それらは同じである必要があります。

これは、マルチレベルのネストされたルートの完全な例です。

プランカー

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 { }

お役に立てれば！！

10
Madhu Ranjan