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)有两个属性:

  1. path:一个用于匹配浏览器地址栏中 URL 的字符串。
  2. 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.效果如下:

点击前:


点击后:

原文地址:https://www.cnblogs.com/SUNYZBlog/p/9749694.html

时间: 2024-10-10 05:04:28

Angular创建路由从主界面跳转到我们的cesium界面的相关文章

在一个XAML中点击按钮,界面跳转到另一个XAML界面方法

private void ButtonGo_camerapage(object sender, RoutedEventArgs e) { this.Content = new cameraPage();//cameraPage是我要跳转到的新XAML界面的名称 }

开发一个新的android界面、界面跳转 看图学Android---Android 开发实例教程三、四

Android实例图解教程目录 http://blog.csdn.net/wyx100/article/details/45061407 一.课程功能 本课程讲述建立一个新界面和界面切换(从界面一切换到界面二). 二.课程界面 界面一(启动界面) 界面二(主界面) 三.工作流程 完成页面切换需要2个过程: 1.建立一个工程,见第二节. http://blog.csdn.net/wyx100/article/details/45248209 可以在该项目基础继续开发. 2.建立开机界面 先引入资源

iOS 跳转到系统的设置界面-b

在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 本人已经测试,在5c iOS8.3系统 和 5s iOS7.1系统中可以正常跳转 跳转到自己的项目中 在需要调转的按钮动作中添加如下的代码,就会跳转到设置中自己的app的设置界面,这里会有通知和位置权限的设置 NSURL * url = [NSURLURLWithString:UIApplicationOpenSettingsURLString]: if([[

Java中轻松实现界面跳转

作者:兄弟连Java中轻松实现界面跳转,Java中轻松实现界面跳转 假设这样一种情况,我们的系统的界面使用javax.swing包构建,界面的基础是BaseView,他是一个容器,当然他应当提供获取控件元素的功能,比如得到按钮,下拉框,表格等,当然仅仅是一个容器而已,而我们的界面的元素全部部署在JPanel上. 描述为: 一个界面就是一个BaseView,他只包含一个JPanel,这个包含JPanel包含所有我们的Swing控件,例如JButton,JLable等等. 问题出现了:我们通常因为业

iOS 跳转到系统的设置界面

在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 本人已经测试,在5c iOS8.3系统 和 5s iOS7.1系统中可以正常跳转 跳转到自己的项目中 在需要调转的按钮动作中添加如下的代码,就会跳转到设置中自己的app的设置界面,这里会有通知和位置权限的设置 NSURL * url = [NSURLURLWithString:UIApplicationOpenSettingsURLString]: if([[

那些年,被我们遗忘的技术&lt;Android 基于URL界面跳转&gt;

对于安卓界面跳转主要大家常用的可能都是显示的调用方式,我记得曾经有次面试的时候还被问到,确实显示的跳转狠简单并且很暴力,同时也深受大众喜爱.但是既然Google提供了另一种隐式的界面跳转,能一直存在下来必然是有意义的.那么问题来了,为什么这么说? 鞥横. 对于系统级应用的调用我想应该很多人用到,例如调用系统打电话功能,系统相册,系统相机等等.对于这些调用其实我们都是隐式调用.这也许是Google提供该功能的一个重要原因吧!可能在当前应用内部很少会有人用到这种调用方式,但是对于当下组件化开发盛行时

本地推送通知界面跳转demo

本地推送通知界面跳转demo: /* 1.在发送本地通知的时候,通过userInfo属性来指示跳转到那个界面 2.监听本地通知的接收 1.当收到本地通知就会调用该代理方法 调用场景 1.如果应用程序在后台,当点击通知的时候 2.如果应用程序在前台,一旦收到本地通知,就会调用该方法 所以:判断如果应用程序在前台时候,不要执行界面跳转,来提高用户体验 3.如果应用程序被杀死了,那么这个方法就不再执行了 //- (void)application:(UIApplication *)applicatio

iOS开发-使用Storyboard进行界面跳转及传值

前言:苹果官方是推荐我们将所有的UI都使用Storyboard去搭建,Storyboard也是一个很成熟的工具了.使用Storyboard 去搭建所有界面,我们可以很迅捷地搭建出复杂的界面,也就是说能为我们节省大量的时间.我们还可以很直观地看出各个界面之间的关系,修改起来也很方便.将 来如果遇到需要作修改的地方,我们只需要找到相对应的Storyboard就可以了,比起以前来说,快捷了不少. 我会在本文的最后附上Demo,可以帮助你们有更直观的理解,有需要的人可以去下载运行一下. 另外,建议大家实

Android 界面跳转及数据交换

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/40015757 本文演示:Android 界面跳转及数据交换,通过一个小Demo展示全部过程. 效果如下所示: 1)MainActivity.java package doogle.xian.bundletest; import android.app.Activity; import android.content.Intent; import android.os.Bund