angular6 mysql_angular6之路由

对于前端单页应用，路由一般由前端管理。在angular6中路由通过@angular/router模块实现。

1、在app的根目录下新建app-routing.module.ts，需要引入RouteModule, Routes模块，

import { RouterModule, Routes } from ‘@angular/router’

2、配置路由信息:

动态路由：

{

path: '/view/:id',

component: viewComponent

}

可以在页面获取的路由参数id的具体值。

3、配置ngModule@NgModule ({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})

4、最后将模块导出export class AppRoutingModule {}在app.module.ts根模块中将AppRoutingModule在imports中引入在模板中会显示匹配到的组件

angular6 mysql_angular6之路由相关推荐

angular6 mysql_Angular6项目搭建
安装工具: Nodejs, npm 最新版, https://nodejs.org/en/ Angular CLI, npm install -g @angular/cli Visual ...
【CuteJavaScript】Angular6入门项目（1.构建项目和创建路由）
本文目录一.项目起步二.编写路由组件三.编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四.编写服务 1.为什么需要服务 2.编写服务五.引入RxJS 1.关于RxJS 2.引 ...
Angular6路由复用策略解读
本文除了介绍路由复用策略外,还实现了父子路由如何复用的问题,项目见末尾: 1.父路由和子路由页面的tab不应该同时存在,否则,切换时容易报以下错误: Cannot reattach Activated ...
angular6入门实战，环境搭建、添加组件、服务、路由和HTTP
目录一.新建web项目二.启动项目三.添加表格,css控制隔行变色四.创建组件五.显示列表创建模拟数据导入用* ngFor 列出使用* ngIf 隐藏空白详细信息设置所选样式添加 ...
在Angular6中使用primeNG UI框架
第一步:使用ng new project ng new PrimeNGproject 第二步:可以运行一下是否成功 ng s 第三步:安装primeNG npm install primeng 第四步 ...
Angular6 + Ng-Zorro项目开发总结（一）
项目概述开发一个多功能平台,具有展示产品,申请服务开通,申请记录查看等功能,与公司内部系统相连接,初步功能较为单一, 后期可能会扩展新功能. 项目选型由于上一个项目选择的Abp框架,配合使用的是a ...
RabbitMQ 入门系列（2）— 生产者、消费者、信道、代理、队列、交换器、路由键、绑定、交换器
本系列是「RabbitMQ实战:高效部署分布式消息队列」和「RabbitMQ实战指南」书籍的读书笔记. RabbitMQ 中重要概念 1. 生产者生产者(producer)创建消息,然后发送到代理 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
发送快递：配置静态路由
背景基础组网,比如现在要实现相互通信,通过两台计算机来检测是否互通,但是它们中间通过一些路由器相互连接,这个时候,你要考虑,怎么配置这些路由器,包括给pc配地址,给路由器配地址,怎么定义这些网段! ...

angular6 mysql_angular6之路由

angular6 mysql_angular6之路由相关推荐

最新文章

热门文章