当前位置：首页 > news >正文

[Angular] 笔记 18：Angular Router

news 文章来源：https://blog.csdn.net/ftell/article/details/135297025 2025/1/17 1:04:24

Angular Router 视频

chatgpt：
Angular 具有内置的大量工具、功能和库，功能强大且经过良好设计，如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中，无需额外的设置或第三方库。这简化了开发流程，因为不必从头编写或集成许多常见的功能，而是可以利用Angular提供的工具快速启动和构建应用程序。

也就是说，Angular 是一种自带电池(Batteries Included)的框架，web 开发所需要的一切应用尽有，Router 是其中之一。

当创建Angular app时，使用命令 ng new <app-name>， Angular 接着会问要不要 Routing 功能 ? 选择 yes, 生成的 app 就会带有 routing 模块：

在这里插入图片描述

1. 注册 routes

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';// 这里注册两个 route：homepage route 和 通配符 route
const routes: Routes = [{ path: '', component: HomeComponent, pathMatch: 'full' },{ path: '**', component: NotfoundComponent },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],
})
export class AppRoutingModule {}

2. 生成与所注册的 routes 对应的两个组件

在这里插入图片描述

一个组件名称为 notfound, 另一个为 home.

奇怪的是上述视频中的方法不起作用，没法生成组件，使用 ng-cli 命令:

PS D:\Angular\my-app> ng generate component home --module=app.module.ts    
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (585 bytes)
CREATE src/app/home/home.component.ts (267 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (727 bytes)
PS D:\Angular\my-app> ng generate component notfound --module=app.module.ts
CREATE src/app/notfound/notfound.component.html (23 bytes)
CREATE src/app/notfound/notfound.component.spec.ts (613 bytes)
CREATE src/app/notfound/notfound.component.ts (283 bytes)
CREATE src/app/notfound/notfound.component.css (0 bytes)
UPDATE src/app/app.module.ts (813 bytes)
PS D:\Angular\Angular Tutorial For Beginners 2022\my-app>

在这里插入图片描述

3. 核对 `index.html` 内容

此文件中必须有：<base href="/"> 以及 <app-root></app-root>, 缺一不可，否则 routing 部分就不起作用。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>MyApp</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body>
</html>

4. 连结 router 链接

app.component.html：

<router-outlet></router-outlet>
<div><a routerLink="/"></a>
</div>

缺少了 router-outlet， routing 也会不起作用

5. Navbar interface

app.component.ts:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';// navbar interface
interface Nav {link: string;name: string;exact: boolean;
}@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],
})
export class AppComponent {constructor() {}
}

6. 修改 `app.component.html`

将其中的 <a> 改成使用 for loop:

<router-outlet></router-outlet>
<div><a*ngFor="let item of nav"[routerLink]="item.link"routerLinkActive="active"[routerLinkActiveOptions]="{ exact: item.exact }">{{ item.name }}</a>
</div>

routerLinkActive 用于设置当前链接是否为 active，即所在页面是否与当前链接对应。

同时设置 app.component.css，设置 active 链接的背景色为红色：

.cool-bool {background: #0094ff;
}.active {background-color: red;
}

7. 运行 `ng serve`:

在这里插入图片描述

1. 注册 routes

2. 生成与所注册的 routes 对应的两个组件

3. 核对 index.html 内容

4. 连结 router 链接

5. Navbar interface

6. 修改 app.component.html

7. 运行 ng serve:

相关文章：

3. 核对 `index.html` 内容

6. 修改 `app.component.html`

7. 运行 `ng serve`: