web-dev-qa-db-ja.com

Angular 5のネストされたルーティング

私は次のモジュール構造を持っています：

1-RootModule

次のようにルーティングします。

const routes: Routes = [
  { path: '', redirectTo: 'app', pathMatch: 'full' }
];

2- AppModule

次のようにルーティングします。

const routes: Routes = [
   { 
        path: 'app', 
        component: AppComponent,
        children: [
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
           }
       ]
   }

];

また、AppModuleはルーティングモジュールのみで次のように構成されているMainModuleをインポートします。

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
               path: 'index',
               loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
            },
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
            }
       ]
  }

];

ここで、RootComponentが開始点です。

@Component({
  selector: "app-root",
  template:  "<router-outlet></router-outlet>"
})
export class RootComponent implements OnInit {
  constructor() { }

  ngOnInit() {
 }
}

AppComponentは次のように定義されます。

<router-outlet></router-outlet>
<app-quick-sidebar></app-quick-sidebar>

最後に、MainComponentは次のように定義されます。

<app-header-nav></app-header-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

重要なのは、RooComponent-> AppComponent-> MainComponent-> IndexComponent

これまでのところ、上記のルートでは、AppComponentはバイパスされています！

何か案が？

ありがとう

angularangular5angular-routingangular-router
6
Bill

現在のルート構成では、MainComponentはAppComponentのパスの子配列に構成されていません。では、なぜそれがテンプレートに表示されるのでしょうか。

現在、ルーティング構成は次のように機能します。

  • /appに移動すると、AppComponentに移動します
  • /indexに移動すると、IndexComponentに移動します。

RooComponent-> AppComponent-> MainComponent-> IndexComponentの望ましい動作を実現するには、ルート構成は次のようになります。

const routes: Routes = [{ 
  path: '', 
  component: AppComponent,
  children: [{
    path: '',
    component: MainComponent,
    children: [{
      path: '', redirectTo: 'index', pathMatch: 'full'
    }, {
      path: 'index',
      loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
    }]
  }]
}];
3
Tomasz Kula

返信いただきありがとうございます。あなたの解決策は元の問題を解決しました。しかし今、私は別の問題を見ています。更新されたルーティングファイルは次のとおりです。

1- root-routing.module.ts

_const routes: Routes = [
 { 
    path: '', 
    redirectTo: 'index', 
    pathMatch: 'full' 
 }
];
_

2- app-routign.module.ts

_const routes: Routes = [
{ 
    path: '', 
    component: AppComponent,
    children: [
        {
            path: '',
            component: Layout.HeaderFooterMainComponent,
            children: [
                {
                    path: '',
                    redirectTo: 'index',
                    pathMatch: 'full'
                },
                {
                    path: 'index',
                    loadChildren: '.\/modules\/index\/index.module#IndexModule'
                },
                {
                    path: '404',
                    loadChildren: '.\/modules\/not-found\/not-found.module#NotFoundModule'
                },
                {
                    path: '**',
                    redirectTo: '404',
                    pathMatch: 'full'
                }        
            ]
        }
    ]
}];
_

3- index.module.ts

_const routes: Routes = [
{
    path: '',
    component: Layout.AsideLeftDefaultComponent,
    children: [
        {
            path: '',
            component: IndexComponent
        }
    ]
}];
_

ここで、どこにも存在しないURL _/index/d_にアクセスしようとすると、/ 404ページにリダイレクトされますが、_styles.bundle.css_は_/index/styles..._ではなく_/styles.bundle.css_から読み込まれます。 ）__。 indexはサブフォルダーと見なされるようになりました！なぜそれが起こっているのですか？

0
Bill