一、添加路由管理引用

打开src/app/app.module.ts文件

import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';

二、设置管理

打开src/app/app.module.ts文件

const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: '',
component: NavbarComponent,
outlet: 'right' /* 设置路由器的位置 */
},
{
path: '',
component: SidebarComponent,
outlet: 'left' /* 设置路由器的位置 */
},
{
path: 'login',
component: LoginComponent
},
{
path: 'register',
component: RegisterComponent
},
{
path: 'setting',
component: SettingsComponent
},
{
path: '',
component: PageNotFountComponent
},
]

三、注入路由

打开src/app/app.module.ts文件

  /* 注册模块 */
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes) /*注册路由*/
],

四、在画面中引入

打开src/app/app.component.html,修改内容为

<!-- 导航条 -->
<app-navbar></app-navbar>
<br/>
<br/>
<br/>
<!-- 内容 -->
<div class="container-fluid">
<div class="row">
<!--左边导航-->
<router-outlet name="left"></router-outlet>
<!--内容-->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<router-outlet></router-outlet>
</main>
</div>
</div>

五、效果预览

Angular5学习笔记 - 路由管理(五)的更多相关文章

  1. angular5学习笔记 路由通信

    首先在路由字典中,接收值的组件中加上:/:id 在发送值的组件中,发送值的方式有几种. 第一种:<a routerLink="/detail/1">新闻详情1</ ...

  2. Angular5学习笔记 路由配置

    因为angular-cli脚手架的关系,所以配置路由可以通过命令行来创建路由文件 原本创建一个angular项目的命令是ng new 项目名,就可以了,但这样创建出来的项目是没有路由文件的. 如果需要 ...

  3. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  4. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  5. Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  6. 【Unity Shaders】学习笔记——SurfaceShader(五)让纹理动起来

    [Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...

  7. VSTO学习笔记(十五)Office 2013 初体验

    原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...

  8. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  9. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线 学习目标 了解几个用以表达真实场景的标志和2D图像 ...

随机推荐

  1. Pandas标记删除重复记录

    Pandas提供了duplicated.Index.duplicated.drop_duplicates函数来标记及删除重复记录 duplicated函数用于标记Series中的值.DataFrame ...

  2. DP问题分类总结

    http://m.blog.csdn.net/y990041769/article/details/24194605 此博客总结了动态规划相关问题,学习一下!

  3. Eclipse4.2安装样式插件

    1.插件地址 http://eclipse-color-theme.github.com/update 点击Eclipse菜单 Help>>Install New Software... ...

  4. 深入Spring:自定义注解加载和使用

    前言 在工作中经常使用Spring的相关框架,免不了去看一下Spring的实现方法,了解一下Spring内部的处理逻辑.特别是开发Web应用时,我们会频繁的定义@Controller,@Service ...

  5. uniqueidentifier in SQL becomes lower case in c#

     https://stackoverflow.com/questions/16938151/uniqueidentifier-in-sql-becomes-lower-case-in-c-sharp ...

  6. How to Delete using INNER JOIN with SQL Server?

    https://stackoverflow.com/questions/16481379/how-to-delete-using-inner-join-with-sql-server You need ...

  7. mysql一次运行多个SQL文件

    在文件 batch.sql 中写下多个SQL文件 source file1.SQLsource file2.SQLsource file3.SQL 然后运行 source batch.sql

  8. 【P2107】小Z的AK计划(优先队列+贪心)

    水一发优先队列的水题.. 这个题貌似以前有做过类似的.具体的方法是用大根堆辅助贪心算法得出正解.可以看出来,如果小Z走到了某个地方,那么他最远一定是到了这里,不可能有再走回来这种操作,因为很明显那样不 ...

  9. SpringCloud-路由网关(Zuul)

    在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.只能路由.配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统. 在Spring Cloud ...

  10. sqoop1.4.6 全量导入与增量导入 与使用技巧

    全量导入: sqoop import --connect jdbc:mysql://192.168.0.144:3306/db_blog --username root --password 1234 ...