526互联

Angular Routing Primary

发布时间 2023-10-18 11:11:08作者: 两块五的菜鸟

Why Routing

1. 通过 Url 表示应用的状态
2. 让应用变得可以link,即 直接通过 url 来链接到某个指定的页面
3. 可用通过用户角色来确定是否可以访问该页面
4.  *可通过路由来模块化加载应用*

Configuring Routes

  1. Auto create ：可以通过angular-cli 来创建基本的routing相关

  2. Manually create:

    a. 再header中添加 base tag

    <base href="/">

    b. 创建路由文件 app.route.ts

    import {Routes, RouterModule} from '@angular/router'

const routes: Routes = [
    {path:'component-one', component:componentOne},
    {path:'component-two', component:componentTwp}
]

export router = RouterModule.forRoot(routes);

    c. 导入router到app.module.ts 主模块中

    import {router} from './app.route';

@Ngmodule({
    import: [  router  ],
    declaration:[
        componentOne,
        componentTwo
    ],
    bootstrap:[appComponent]
})

export class AppModule {}