Angular7.2.7路由使用初体验

本文记录自己在学习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>  
 <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>

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