angular 路由

柔光的暖阳◎ 2024-04-17 13:49 10阅读 0赞

在 `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';
        }
      }复制代码

转载于:https://juejin.im/post/5d6335c8e51d4561fb04bf87

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 路由

`index.html` 下添加`<base>` 元素，告诉路由器该如何合成导航用的URL <base href="/">复制代码新建angular项目时...

柔光的暖阳◎/ 2024年04月17日 13:49/ 0 赞/ 11 阅读

相关 angular 嵌套路由

mylogin.component.ts import { Component, OnInit } from '@angular/core'; @C

桃扇骨/ 2022年06月01日 07:00/ 0 赞/ 205 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 249 阅读

相关 Angular4--路由基础

【背景】最近在学习Angular，迫不及待的想把学习到的内容跟大家分享。【内容】 1.实现一个简单的路由（1）使用angular-cli创建一个带路由的项目

素颜马尾好姑娘i/ 2022年06月01日 00:23/ 0 赞/ 164 阅读

相关 Angular 路由传参数

Angular路由传参配置路由通过 descr/1 等形式访问 DescrComponent，此时 1 为携带参数。 { path: 'descr/:

野性酷女/ 2022年05月27日 09:15/ 0 赞/ 218 阅读

相关 Angular 路由 ( 二 )

Angular 路由 ( 二 ) > 应用有一个`配置过的路由器`。外壳组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。它还有一些 `Router

我不是女神ヾ/ 2022年05月24日 12:43/ 0 赞/ 231 阅读

相关 Angular 路由(一)

Angular 路由一描述路由 Angular 是一个单页面的应用所有的页面展示都在本页面内完成。我们实现页面局部刷新展示一个班级的学生信息时， 1.

电玩女神/ 2022年05月23日 05:25/ 0 赞/ 176 阅读

相关 Angular 4 子路由

子子路由 ![158914-20170814132405428-297560221.png][] 现在要为产品组件增加两个子组件 1. 创建productDesc和sel

╰+攻爆jí腚メ/ 2022年02月01日 01:31/ 0 赞/ 193 阅读

相关 Angular 路由⑦要素

[![返回主页][logo.gif]cnzt][logo.gif_cnzt] /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f

╰半橙微兮°/ 2022年01月05日 09:11/ 0 赞/ 265 阅读

相关 Angular 学习（五）：Angular 路由（Route）

Angular 路由（Route）我们可以将路由器理解成控制整个应用状态的视图对象，每个应用都有一个路由器；路由器的另一个作用是为每个视图分配唯一的 url，可以

深藏阁楼爱情的钟/ 2021年09月29日 01:48/ 0 赞/ 410 阅读