铁雪资源网 Design By www.gsvan.com

本文记录自己在学习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就是路由的出口, 表示路由对应的组件应该在这里显示.

<h1>Angular Router</h1>
<nav>
 <a routerLink="/user/browse-product">browse-product</a> &nbsp;
 <a routerLink="/user/buy-product">buy-product</a>&nbsp;
 <a routerLink="/admin/manage-product">manage-product</a>&nbsp;
 <a routerLink="/admin/operator-record">operator-record</a>&nbsp;
</nav>
<router-outlet></router-outlet>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
Angular7.2.7路由使用,Angular7,路由

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“Angular7.2.7路由使用初体验”

暂无Angular7.2.7路由使用初体验的评论...