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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
vue组件间通信解析
Mar 01 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
使用 MySQL Date/Time 类型
2008/03/26 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
dedecms中使用php语句指南
2014/11/13 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python实现的knn算法示例
2018/06/14 Python
Python字节单位转换实例
2019/12/05 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python一些性能分析的技巧
2020/08/30 Python
实习医生自我评价
2013/09/22 职场文书
室内设计实习自我鉴定
2013/09/25 职场文书
家长会标语
2014/06/24 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
商务考察邀请函模板
2015/02/02 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
vscode中使用npm安装babel的方法
2021/08/02 Javascript
JVM之方法返回地址详解
2022/02/28 Java/Android
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技