Angular 通过路由页面导航

因为Angular是单页面应用,不能用传统的文件目录跳转,需要使用路由器。

路由配置

配置路由有两种方式:

  1. 在创建项目或初始化项目时,使用--routing参数,例如:

    ng new angular --routing
    项目创建时会自动生成app-routing.module.ts:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    const routes: Routes = [
      {
        path: '',
        children: []
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }
    

    并且app.module.ts自动加上 AppRoutingModule

    入口组件模板 app.component.html自动加上<router-outlet></router-outlet>标签

  2. 手工处理上面的步骤

    当URL匹配时,Angular会把相应的组件,插到router-outlet位置。

看下面的例子:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ArticleListComponent} from "./article-list/article-list.component";
import {ArticleDetailComponent} from "./article-detail/article-detail.component";
import {ArticleComponent} from "./article/article.component";

const routes: Routes = [
  {
    path: 'article',
    component:ArticleComponent,
    children: [
      {
        path:'list',
        component:ArticleListComponent,
        children:[]
      },
      {
        path:':id',
        component:ArticleDetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

分别配置了/article,/article/list,/article/1234 三个路由,:id会匹配article的id。component指定匹配时需要显示的组件。

需要注意的是children字段,它的组件是在parent里渲染,而不是在根组件里渲染。也就是说,article组件必须有router-outlet标签,/article/list/article/1234是显示在article组件中的,而不是app组件中

页面跳转

模板中跳转:

<a routerLink="/article">文章</a>
<a routerLink="/article/list" routerLinkActive="active">文章列表</a>

routerLinkActive会根据当前路由状态应用相应的css类,上面的例子中,只有当前页面是/article/list时,才会应用active

代码中跳转:
在构造方法中注入Router

constructor(private router:Router){}

跳转

this.router.navigate(['article','list']);

navigate方法的参数是一个数组,包含路径或路径中的参数,上面的例子会跳到/article/list

© 2017, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接! 应用开发笔记