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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue实现树形菜单效果
Mar 19 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 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
PHP 日常开发小技巧
2009/09/23 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
js实现全选和全不选
2020/07/28 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python+django实现文件上传
2016/01/17 Python
python实现excel读写数据
2021/03/02 Python
python生成密码字典的方法
2018/07/06 Python
Python实现随机漫步功能
2018/07/09 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
小学感恩节活动总结
2015/03/24 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Python中22个万用公式的小结
2021/07/21 Python