Angular 7.2.7ルーティングの初期体験
2224 ワード
自分がangularを学ぶ中でルーティングに対する理解を記録します
angularルーティングはangularのパケットにはありません.angularのルーティングを使用するには@angular/routerから導入する必要があります.
ルーティングの使用:
サブルートの使用:
親コンポーネント:
app.module.tsにモジュールをインポート
次にapp.component.htmlにrouter-outletを加えるとよい、router-outletはルーティングの出口であり、ルーティングに対応するコンポーネントがここに表示されるべきであることを示す.
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