Angular7.2.7路由使用初体验


Posted in Javascript onMarch 01, 2019

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

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

Javascript 相关文章推荐
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
详解vue高级特性
Jun 09 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
vuex实现及简略解析(小结)
Mar 01 #Javascript
简单两步使用node发送qq邮件的方法
Mar 01 #Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 #Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 #Javascript
使用JavaScript解析URL的方法示例
Mar 01 #Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 #Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 #Javascript
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php生成gif动画的方法
2015/11/05 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python实现代码审查自动回复消息
2021/02/01 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
Ruby如何定义一个类
2012/10/08 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
员工工作表现评语
2014/04/26 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
感谢师恩主题班会
2015/08/17 职场文书