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

點擊前：

 

 

 

 點擊後：