web-dev-qa-db-ja.com

Angular 4名前付きルーターアウトレットを使用した遅延読み込みが機能しない

名前付きルーターアウトレットにルーティングされない遅延読み込みに問題があります。誰かが間違っているときにどこを見ればいいですか？製品->デフォルトのルーターアウトレットと製品の詳細->名前付きルーターアウトレットへのリンクがあるメインページがあります。

  <div>
   <div><a [routerLink]="['product']"> Product </a> </div>
   <div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>
</div>

以下は、プランカーコードです。

プランカーコード

angularlazy-loading
6
AlbertK

これは既知のバグです。問題を追跡できます ここ

回避策またはこの問題の解決策と言えるのは、遅延ロードされたモジュールに補助（つまり名前付き）ルートが存在する場合は、トップレベルのルートに空でないパスを使用することです。

私が見ることができる唯一の欠陥は、ルートに追加された追加のURLセグメントです。

MainRoutingModule：トップレベルの空でないパス（つまり、「パス： 'ロード'」）

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainpageComponent } from './mainpage.component';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './productdetail.component';

const childroutes: Routes = [

 { path: 'load', component: MainpageComponent  ,
    children: [ 
      {path: 'product', component: ProductComponent
      {path: 'productdetail', component: ProductDetailComponent,
        outlet: 'detail' 
      },

    ]
 },


];

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);

const newLocal: NgModule = {
    imports: [RouterModule.forChild(childroutes) ],
    exports: [RouterModule, ],
    declarations: []
};

@NgModule(newLocal)


export class MainRoutingModule { }

MainpageComponent：セカンダリルートを使用するための正しい構文。

[routerLink] = "[{outlets：{detail：['productdetail']}}]"

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-main',
  template: `
  <div>

  <div><a [routerLink]="['product']"> Product </a> </div>
  <div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>

</div>
  `,
  encapsulation: ViewEncapsulation.None,
})

export class MainpageComponent {}

LoginComponent：

[routerLink] = "['mainpage/load']"を使用して、メインモジュールをロードします。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`,

})

export class LoginComponent implements Oninit, OnDestroy {
constructor() {}

ngOnInit(): void {}

}

デモ： https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview

10
mohit uprim

ルートがprofile ProfileComponent（example.com/profile）の一部であるとしましょう

profile.component.ts

<a routerLink="/profile/about">About</a>
<a routerLink="/profile/edit">Edit</a>
<a routerLink="/profile/settings">Settings</a>
<router-outlet></router-outlet>

3つの異なるコンポーネントがあります。

  • コンポーネントについて
  • EditComponent
  • SettingsComponent

ルートは次のようになります。

{
    path: 'profile',
    component: ProfileComponent,
    children: [
        {
            path: 'about',
            component: AboutComponent
        },
        {
            path: 'edit',
            component: EditComponent
        },
        {
            path: 'settings',
            component: SettingsComponent
        }
    ]
}
1
Nebojsa Sapic

空のパス ""を回避することで、問題の solution を取得しました。 Domenic Helfenstein の厚意により、問題の再現に時間をかけました here 。

0
Tomasz O.