湖北省建设安全管理协会网站线上推广方案模板
路由的实现
当我们系统越来复杂，功能越来越多，路由也就是必须的了。在 ng 中如何实现路由呢？
启用路由
- 在 app 目录下，新建一个 router 目录，把 app.routers.ts 文件拷贝过来，并修改一下。
import { Routes } from "@angular/router";
export const routes: Routes = [];
- 在 app.config.ts 中，引入 router 模块
import { ApplicationConfig } from "@angular/core";
import { provideRouter } from "@angular/router";
import { routes } from "./app.routes";
export const appConfig: ApplicationConfig = {//注入路由providers: [provideRouter(routes)],
};
- 在 main.ts 中，初始化 app 的配置
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
定义路由
-
在 app.routes.ts 中，定义路由
- path 前面不能有’/‘，否则会报错’，ng 渲染后 会自动给我们加上’/'，不用我们手动加
- a 的 routerLink 属性，必须和 path 对应，否则会报错
- a的href属性不能用了，切换时页面会刷新闪烁，routerLink不会
- 路由的 component，引入路径不对，会提示组件类型找不到的暴红
- 路由的 title，在浏览器中，标题栏会显示这个,是自动给我们显示，不用我们手动赋值
import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";
export const routes: Routes = [{path: "/",component: HomeComponent,title: "首页",},{path: "/about",component: AboutComponent,title: "关于",},
];
错误排查
- 这种是引入的路径不对，导致爆红
