Angular5学习笔记 路由配置
因为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学习笔记 路由配置的更多相关文章
- angular5学习笔记 路由通信
首先在路由字典中,接收值的组件中加上:/:id 在发送值的组件中,发送值的方式有几种. 第一种:<a routerLink="/detail/1">新闻详情1</ ...
- Angular5学习笔记 - 路由管理(五)
一.添加路由管理引用 打开src/app/app.module.ts文件 import {RouterModule} from '@angular/router'; import {Routes} f ...
- Angular6 学习笔记——路由详解
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Redis学习笔记4-Redis配置详解
在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...
- EasyARM i.mx287学习笔记——minicom配置和使用
0 前言 在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了. 本文说明虚拟机中怎样使用minico ...
- Redis学习笔记4-Redis配置具体解释
在Redis中直接启动redis-server服务时, 採用的是默认的配置文件.採用redis-server xxx.conf 这种方式能够依照指定的配置文件来执行Redis服务. 依照本Redi ...
- vue学习笔记——路由
1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...
- Angular学习笔记—路由(转载)
创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...
- angular5学习笔记(deep in 路由)
最近接手了一个angular5的项目.项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的. 接手前几天当然是熟悉代 ...
随机推荐
- MVC中使用EF的技巧集(二)——分部验证
1.从数据库生成模型后,再次更新模型时,之前设置的验证规则会丢失. 解决方法:在Models文件夹中新建一个空白类,把它命名为shujuyanzh.cs(类名可以自定),然后把Models中自动生成的 ...
- 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 ...
- c++计算器后续(4)
自娱自乐: 大概是终于做到没做完的部分了,第三步助教学长的评论还没去改,感觉那个把读取文件放到Scan里面比较麻烦,其他大概还好.以上. 文件读写: 先是原来的残留问题,都是和fstream :: o ...
- BT提权wind2008R2
昨天中午打开电脑,对着菜刀在那翻啊翻,找到一个64bit的os. 因为这个ip不在曾经提权过的主机列表里面,心想这应该是个低权限的网站,顺手打个whoami试试,结果给我返回了"nt aut ...
- 把bootstrap4 dropdown 的导航下拉菜单触发方式改为鼠标浮动触发
方法1: 原文: https://zzll.org/article/bootstrap4-xialacaidan 很简单,css中加入如下代码 .dropdown:hover>.dropdown ...
- 020.2.5 Calender对象
内容:日历对象获取时间,设置时间,日期偏移 通过工厂化获得对象.getInstance();get() 获取时间信息 Calendar c = Calendar.getInstance(); //获取 ...
- 020.2.1 system
内容:System的常用方法1.currentTimeMillis()方法(与1970年相差多少毫秒),2.Properties getProperties():获取系统属性3.Set<Str ...
- 015.1 Lock接口
内容:Lock接口使用步骤,同步生产大白兔奶糖的例子 同步代码块的锁是隐式的,显式容易让我们理解.所以我们使用这个显式的方法,方便理解代码.######实现同步步骤:1.获取锁:lock()2.同步代 ...
- 关于memcpy的实现
今天去面试,面试官出了一个关于memcpy的函数原型的实现的问题,本来这个问题是很简单的,但是不知道当时怎么脑子一抽竟然写错了,真是”累觉不爱”了.感觉这份工作算是泡汤了,算了事情发生了,错过了也就错 ...
- 对json的理解?
回答一: a.JSON对象:以 ”{“ 开始,以 ”}” 结束,里面则是一系列的键(key)值(value)对,键和值用 ”:” 分开,每对键值对之间用 ”,” 分开.参考以下语法: {key1:va ...