做可直接下单购买的网站,临检中心网站建设,广东建设工程监理检测协会网站,企业工商注册流程Angular Router 视频
chatgpt#xff1a; Angular 具有内置的大量工具、功能和库#xff0c;功能强大且经过良好设计#xff0c;如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中#xff0c;无需额外的设置或第三方库。这简化了开发流…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;// 这里注册两个 routehomepage 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 --moduleapp.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 --moduleapp.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 langen
headmeta charsetutf-8titleMyApp/titlebase href/meta nameviewport contentwidthdevice-width, initial-scale1link relicon typeimage/x-icon hreffavicon.ico
/head
bodyapp-root/app-root
/body
/html4. 连结 router 链接
app.component.html
router-outlet/router-outlet
diva 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
diva*ngForlet item of nav[routerLink]item.linkrouterLinkActiveactive[routerLinkActiveOptions]{ exact: item.exact }{{ item.name }}/a
/divrouterLinkActive 用于设置当前链接是否为 active即所在页面是否与当前链接对应。
同时设置 app.component.css设置 active 链接的背景色为红色
.cool-bool {background: #0094ff;
}.active {background-color: red;
}7. 运行 ng serve:
