Angular create a route to jump from the main interface to our Cesium interface

We want to load and configure the router in a standalone top-level module, which focuses on routing and then imports it from the root module AppModule .

By convention, the name of this module class is called APPRoutingModule , and is located in src/app the app-routing.module.ts file below.

Use the CLI to generate it.

1. In the Command window, enter the NG generate module app-routing --flat --Module=app

--flatPut this file into a src/app separate directory instead.
--module=appTell the CLI to register it AppModule imports in the array, such as:

The routing file appears under the project file:

2. Configure the route definition for Cesium3d in the App-routing.module.ts file

The route definition tells the router which view to display when the user taps a link or enters a URL in the browser's address bar.

The typical Angular route ( Route ) has two properties:

1. path: A string that matches the URL in the browser's address bar.

2. component: The router should create which component when navigating to this route.

If you want the URL to be localhost:4200/cesium3d , navigate to Cesium3dcomponent.

You first import the cesium3dcomponent so that you can Route reference it in. Then define a route array where one of the routes is pointing to the component.

Import {Ngmodule} from ' @angular/core '@angular/common '@angular/router './cesium3d/ Cesium3d.component ';

Const Routes:routes = [{path: ' Cesium3d ', component:cesium3dcomponent}]; 

@NgModule ({imports: [Commonmodule],

Exports: [Routermodule],

3. Create a button in the main interface that references the route. Click on the button and the interface will go to our Cesium main interface

Add the following code to the app.component.html file:

<id= "Toolbar">  <routerlink = "/cesium3d" > Operation three-dimensional model </button></div>  <router-outlet></router-outlet>

4. The effect is as follows:

Before clicking:

After clicking:

Angular create a route to jump from the main interface to our Cesium interface