欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular7.2.7路由使用初体验

程序员文章站 2023-08-25 09:32:21
本文记录自己在学习angular中对路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要从@angular/router中...

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

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