angular 路由

在 index.html 下添加<base> 元素，告诉路由器该如何合成导航用的URL

<base href="/">

新建angular项目时添加路由，然后有app-routing.module.ts文件，在里面加入 如下代码块

import { Routes, RouterModule } from '@angular/router';
// 将要添加路由的组件导入
import { PageNotExitComponent } from './compontents/page-not-exit/page-not-exit';import { OrderListComponent } from './compontents/order-list/order-list';import { WorkDetialComponent } from './compontents/work-detial/work-detial';
const routes: Routes = [
  // 自动重定向到该组件
  { path: '', redirectTo: '/workdetial', pathMatch: 'full' },
  // 订单详情页面  
{ path: 'workdetial', component: WorkDetialComponent },
  // 订单列表页面
  { path: 'orderlist', component: OrderListComponent },
  // 写入不存在的路径
  { path: '**', component: PageNotExitComponent },
];

在app.module.ts中加入 import { AppRoutingModule } from './app-routing.module';

// 给tree节点添加路由导航
<p-tree [value]="navData" [routerLink]="linkUrl"  (onNodeSelect)="nodeSelect($event)"></p-tree><router-outlet></router-outlet>

动态添加路由页面：[routerLink]="linkUrl" 

然后给点击事件判断路由选项：

  nodeSelect(event) {   
if (this.selectedFile.label === "工单详情") {
      this.linkUrl = '/workdetial';
    }
    if (this.selectedFile.label === "工单列表") {
      this.linkUrl = '/orderlist';
    }
  }