【Angular】路由

Angular 路由

路由的配置

1. 在入口文件 index.html 中添加

<base href = "/">

2. 在跟模块中 app.modules.ts 中导入路由库并配置

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

const appRoutes: Routes = [
    {path: 'hello', component: HelloWorldComponent},
    {path: 'helloeveryone', component: HelloEveryoneComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
      ...,
    RouterModule.forRoot(appRoutes)
  ],
})

可以设置调试模式

RouterModule.forRoot(appRoutes, {enableTracing: true})

3. 路由的连接，在app.component.html 上建立路由的连接，其实就是菜单a 标签的跳转

<nav>
    <a routerLink = '/hello'>/hello</a>
    <a routerLink = '/helloevery'>/helloevery</a>
</nav>
<router-outlet></router-outlet>

router-outlet 是路由出口，显示切换的组件

4. 通配符的设置 '**' 当有些路径没有对应的组件可以使用通配符

const appRoutes: Routes = [
    {path: 'hello', component: HelloWorldComponent},
    {path: 'helloeveryone', component: HelloEveryoneComponent},
    {path: '**', component: PageNotFoundComponent}
]

5. 重定向路由

const appRoutes: Routes = [
    {path: 'hellotest', redirectTo: '/hello', pathMatch: 'full'},
]

参数路由

1. 单个参数

配置路由

{path: 'routerParam/:id', component: RouterParamComponent}

访问路由

<a roterLink = 'routerParam/12' routerLinkActive = 'active'>routerParam/12</a>

获取参数

import { Router, ActivatedRouter, ParaMap} from '@angular/router';
...
constructor(private route: ActivatedRouter) {

}
onDoCheck() {
    this.id = this.route.snapshot.paramMap.get("id")

2. 多个参数封装为对象

配置路由

{path: 'routerParam', component: RouterParamComponent}

<a
  [routerLink]="['news']"
  [queryParams]="{ id: 1, name: 'hello', age: 20 }"
  routerLinkActive="active"
  >新闻</a
>

获取参数

import {ActivatedRouter} from '@angular/router';
...
constructor(private route: ActivatedRouter) {

}   
ngOnInit() {
    this.sub = this.route.queryParams.subscribe(data => {
      console.log(data);
    });
}

路由嵌套

1. 路由嵌套

{path: 'hello', component: RouterParamComponent,
children: [
	{path: 'helloeveryone', component: HelloEveryoneComponent},//访问方式 hello/helloeveryone
	{path: 'helloworld', component: HelloWorldComponent}, //访问方式 hello/helloworld
]
}

子组件渲染在在父路由中的 中

路由模块

1. 在 /app 下创建 app-routing.modules.ts ,来包含路由模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

...
// 引用需要路由的组件
import { HeroChildComponent } from './hero-child.component';
import { HeroParentComponent } from './hero-parent.component';

// 配置方式和上面一样,不需要配置declarations了这里
...
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule// ****
  ]
})
export class AppRoutingModule { }

2. 在 app.modules.ts 里面引用

import { AppRoutingModule } from './app-routing.module';//导入路由模块
...
@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
})

函数式路由

1. navigateByUrl()

<button (click) => "helloUrl()">test</button>

//引入
import {Router} from '@angular/router';
//依赖注入
constructor(
private router: Router) {}
)

helloUrl() {
this.router.navigateByUrl('hello');//路径 /hello
//this.router.navigateByUrl('hello', {skipLocationChange: true});
}

{skipLocationChange: true} 属性表示页面跳转但是不发生变化

2. navigate()

helloUrl() {
this.router.navigate(['hello']);//路径 /hello
}

区别： 没啥不一样的，navigateByUrl 是 call ,navigateByUrl 是 apply

3. 路由传参 多个参数

this.router.navigate(['/detail'],{queryParams:{'name':'nihao'}})
this.router.navigateByUrl('/detail',{queryParams:{'name':'nihao'}});

单个参数

this.router.navigateByUrl('hello/12');
this.router.navigate(['hello', '13']);