Angular 7.2.7ルーティングの初期体験

2224 ワード

自分がangularを学ぶ中でルーティングに対する理解を記録します
angularルーティングはangularのパケットにはありません.angularのルーティングを使用するには@angular/routerから導入する必要があります.
ルーティングの使用:
サブルートの使用:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Routes = [
{path: 'browse-product', component: BrowseProductComponent},
{path: 'buy-product', component: BuyProductComponent}
]

@NgModule({
imports: [RouterModule.ferChild(route)], //      ferChild  
exports: [RouterModule]
})

export class ChildRoutingModule {}

親コンポーネント:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Route = [
{
    path: '',
    children: [
      {path: '', redirectTo: '/user/browse-product', pathMatch: 'full'},
      {path: 'user', loadChildren: './user/user.module#UserModule'},
      {path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
    ]
  }
]

@NgModule({
imports: [RouterModule.forRoot(root, {useHash: false})],
exports: [RouterModule]
})

export class ParentRoutingModule {}

app.module.tsにモジュールをインポート
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentRoutingModule } from 'parentRoutingModule';
@NgModule({
declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule,
    ParentRoutingModule
  ]
})

次にapp.component.htmlにrouter-outletを加えるとよい、router-outletはルーティングの出口であり、ルーティングに対応するコンポーネントがここに表示されるべきであることを示す.

Angular Router