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.效果以下：

点击前：

 

 

 

 点击后：