Angular创建路由从主界面跳转到我们的cesium界面
我们要在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule
导入它。
按照惯例,这个模块类的名字叫做 APPRoutingModule
,并且位于 src/app
下的 app-routing.module.ts
文件中。
使用 CLI 生成它。
1.在命令窗口输入ng generate module app-routing --flat --module=app
--flat
把这个文件放进了 src/app
中,而不是单独的目录中。--module=app
告诉 CLI 把它注册到 AppModule
的 imports
数组中,如下图:
项目文件下出现路由文件:
2.在app-routing.module.ts文件中配置cesium3d的路由定义
路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图。
典型的 Angular 路由(Route
)有两个属性:
path
:一个用于匹配浏览器地址栏中 URL 的字符串。component
:当导航到此路由时,路由器应该创建哪个组件。
如果你希望当 URL 为 localhost:4200/cesium3d
时,就导航到 Cesium3dComponent。
首先要导入 Cesium3dComponent,以便能在 Route
中引用它。 然后定义一个路由数组,其中的某个路由是指向这个组件的。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { Cesium3dComponent } from './cesium3d/cesium3d.component';
const routes: Routes = [ { path: 'cesium3d', component: Cesium3dComponent } ];
@NgModule({ imports: [ CommonModule ],
exports: [ RouterModule ],
declarations: [] })
export class AppRoutingModule { }
3.在主界面中创建一个按钮,引用该路由。点击按钮,界面会转到我们的cesium主界面
在app.component.html文件中添加如下代码:
<div id="toolbar">
<button routerLink="/cesium3d">操作三维模型</button>
</div> <router-outlet></router-outlet>
4.效果如下:
点击前:
点击后:
Angular创建路由从主界面跳转到我们的cesium界面的更多相关文章
- 在一个XAML中点击按钮,界面跳转到另一个XAML界面方法
private void ButtonGo_camerapage(object sender, RoutedEventArgs e) { this.Content = new cameraPage() ...
- iOS 跳转到系统的设置界面
跳到健康设置 上网找了一下 你会发现很难找到.代码如下 不信你试试 . NSURL *url = [NSURL URLWithString:@"prefs:root=Privacy& ...
- iOS 跳转到系统的设置界面-b
在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 本人已经测试,在5c iOS8.3系统 和 5s iOS7.1 ...
- ios中的界面跳转方式
ios中,两种界面跳转方式 1.NavgationController本身可以作为普通ViewController的容器,它有装Controller的栈,所以可以push和pop它们,实现你所说的跳转 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- Nodejs之MEAN栈开发(七)---- 用Angular创建单页应用(下)
上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图.路由.控制器全部移到前端.篇幅比较长,主要分页面改造.使用AngularUI两大部分以及一些优化路由.使用Angular的其他指令的 ...
- angular的路由和监听路由的变化和用户超时的监听
先看两篇博客:http://camnpr.com/javascript/1652.html 这一篇博客是重点中的重点: http://www.tuicool.com ...
- 【CuteJavaScript】Angular6入门项目(1.构建项目和创建路由)
本文目录 一.项目起步 二.编写路由组件 三.编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四.编写服务 1.为什么需要服务 2.编写服务 五.引入RxJS 1.关于RxJS 2.引 ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
随机推荐
- 搭建自己的hexo博客
这是我最近用hexo搭建的个人博客,欢迎来参观留言,以下是我创建这个hexo的一步步步骤,欢迎指正! 我的博客 参考自 潘柏信的博客;CnFeat 主题参考这里 pacman; 主题选自这里 hexa ...
- redis 系列11 列表对象
一. 列表对象概述 Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边).一个列表最多可以包含 232 - 1 个元素 (4294967295, ...
- SpringBoot上传文件到本服务器 目录与jar包同级
前言 看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了. 当你使用tomcat发布项目的时候,上传文件存放会变得非常简单,因为你可以随意操作项目路径下的资源.但是当你 ...
- [一]FileDescriptor文件描述符 标准输入输出错误 文件描述符
文件描述符 当应用程序请求打开或者操作文件时,操作系统为应用程序设置一张文件列表,具体的实现形式此处不深入说明 操作系统会提供给你一个非负整数,作为一个索引号,它的作用就像地址或者说指针或者说偏移 ...
- 痞子衡嵌入式:飞思卡尔Kinetis系列MCU启动那些事(1)- KBOOT架构
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔Kinetis系列MCU的KBOOT架构. Bootloader是嵌入式MCU开发里很常见的一种专用的应用程序,在一个没有Boo ...
- FileStream类操作文件
private void buttonselect_Click (object sender, EventArgs e) { OpenFileDialog ofd ...
- 消息队列_MSMQ(1)简单了解
MSMQ (微软消息队列) MSMQ 百度百科 MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一 ...
- js三部曲---预编译
函数内:1,创建AO对象//Activation Object 2,找函数内形参和变量声明,将其作为AO对象的属性名,值为undefined. 3,实参赋到AO对象 形参名里 4,在函数体里找函数声明 ...
- Java开发笔记(二十)一维数组的用法
之前介绍的各类变量都是单独声明的,倘若要求定义相同类型的一组变量,则需定义许多同类型的变量,显然耗时耗力且不宜维护.为此,编程语言引入了数组的概念,每个数组都由一组相同类型的数据构成,对外有统一的数组 ...
- Java开发笔记(三十三)字符包装类型
正如整型int有对应的包装整型Integer那样,字符型char也有对应的包装字符型Character.初始化字符包装变量也有三种方式,分别是:直接用等号赋值.调用包装类型的valueOf方法.使用关 ...