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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
婚纱摄影师求职信
2014/03/07 职场文书
采购意向书范本
2014/03/31 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
2014企业年终工作总结
2014/12/23 职场文书
表扬稿范文
2015/01/17 职场文书
员工规章制度范本
2015/08/07 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Python中文纠错的简单实现
2021/07/07 Python
Python集合的基础操作
2021/11/01 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js