溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文記錄自己在學習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就是路由的出口, 表示路由對應的組件應該在這里顯示.
<h2>Angular Router</h2> <nav> <a routerLink="/user/browse-product">browse-product</a> <a routerLink="/user/buy-product">buy-product</a> <a routerLink="/admin/manage-product">manage-product</a> <a routerLink="/admin/operator-record">operator-record</a> </nav> <router-outlet></router-outlet>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
