因为angular-cli脚手架的关系,所以配置路由可以通过命令行来创建路由文件

原本创建一个angular项目的命令是ng new 项目名,就可以了,但这样创建出来的项目是没有路由文件的。

如果需要带上路由文件,只需要在原本的基础上,在后面加上--routing

ng new 项目名 –-routing

还有一种配置路由的方式:

首先通过ng g module app-routing --flat --module=app,创建一个模块

接着将Routes,RouterModule引入

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

然后加上路由词典

const routes: Routes = [
{ path: 'path', component: NewsComponent },
];

再接着是在@NgModule修饰符下改成

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})

最后就是将导出类名,改成对应的名字

export class AppRoutingModule { }

最后一步:在页面入口(app.component.html)里加上<router-outlet></router-outlet>

--flat :这是让这个模块独立在app目录下

--module=app :将路由模块在app.module.ts里面注入

Angular5学习笔记 路由配置的更多相关文章

  1. angular5学习笔记 路由通信

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

  2. Angular5学习笔记 - 路由管理(五)

    一.添加路由管理引用 打开src/app/app.module.ts文件 import {RouterModule} from '@angular/router'; import {Routes} f ...

  3. Angular6 学习笔记——路由详解

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  4. Redis学习笔记4-Redis配置详解

    在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...

  5. EasyARM i.mx287学习笔记——minicom配置和使用

    0 前言     在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了.     本文说明虚拟机中怎样使用minico ...

  6. Redis学习笔记4-Redis配置具体解释

    在Redis中直接启动redis-server服务时, 採用的是默认的配置文件.採用redis-server   xxx.conf 这种方式能够依照指定的配置文件来执行Redis服务. 依照本Redi ...

  7. vue学习笔记——路由

    1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...

  8. Angular学习笔记—路由(转载)

    创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...

  9. angular5学习笔记(deep in 路由)

    最近接手了一个angular5的项目.项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的. 接手前几天当然是熟悉代 ...

随机推荐

  1. MVC中使用EF的技巧集(二)——分部验证

    1.从数据库生成模型后,再次更新模型时,之前设置的验证规则会丢失. 解决方法:在Models文件夹中新建一个空白类,把它命名为shujuyanzh.cs(类名可以自定),然后把Models中自动生成的 ...

  2. December 18th 2016 Week 52nd Sunday

    May your love soar on the wings of a dove in flight. 愿你的爱乘着飞翔中的白鸽,展翅高飞. May my life soar on the wing ...

  3. c++计算器后续(4)

    自娱自乐: 大概是终于做到没做完的部分了,第三步助教学长的评论还没去改,感觉那个把读取文件放到Scan里面比较麻烦,其他大概还好.以上. 文件读写: 先是原来的残留问题,都是和fstream :: o ...

  4. BT提权wind2008R2

    昨天中午打开电脑,对着菜刀在那翻啊翻,找到一个64bit的os. 因为这个ip不在曾经提权过的主机列表里面,心想这应该是个低权限的网站,顺手打个whoami试试,结果给我返回了"nt aut ...

  5. 把bootstrap4 dropdown 的导航下拉菜单触发方式改为鼠标浮动触发

    方法1: 原文: https://zzll.org/article/bootstrap4-xialacaidan 很简单,css中加入如下代码 .dropdown:hover>.dropdown ...

  6. 020.2.5 Calender对象

    内容:日历对象获取时间,设置时间,日期偏移 通过工厂化获得对象.getInstance();get() 获取时间信息 Calendar c = Calendar.getInstance(); //获取 ...

  7. 020.2.1 system

    内容:System的常用方法1.currentTimeMillis()方法(与1970年相差多少毫秒),2.Properties  getProperties():获取系统属性3.Set<Str ...

  8. 015.1 Lock接口

    内容:Lock接口使用步骤,同步生产大白兔奶糖的例子 同步代码块的锁是隐式的,显式容易让我们理解.所以我们使用这个显式的方法,方便理解代码.######实现同步步骤:1.获取锁:lock()2.同步代 ...

  9. 关于memcpy的实现

    今天去面试,面试官出了一个关于memcpy的函数原型的实现的问题,本来这个问题是很简单的,但是不知道当时怎么脑子一抽竟然写错了,真是”累觉不爱”了.感觉这份工作算是泡汤了,算了事情发生了,错过了也就错 ...

  10. 对json的理解?

    回答一: a.JSON对象:以 ”{“ 开始,以 ”}” 结束,里面则是一系列的键(key)值(value)对,键和值用 ”:” 分开,每对键值对之间用 ”,” 分开.参考以下语法: {key1:va ...