[Angular2]Angular2 路由，从入门到放弃

NEPTUNE
826 阅读3分钟

Angular2 路由跳转

最近入职以后公司接了一个Angular2项目，需要用到路由进行页面跳转，但是官方文档给出的样例是类似于导航一样，并不会直接跳转到一个新的页面，在找了很多个教程以后终于研究出来了解决方案。

什么是路由

在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。

基本配置步骤

  • 定义路由配置
  • 创建根路由模块
  • 添加路由插座

示例

1.新建一个 Angular 项目

ng new angular-router

2.进入到 angular-router 文件夹内

cd angular-router

3.新建两个组件 login ， index

ng g c login

ng g c index

4.在 app 文件夹下新建 app.routes.ts,设置启动的第一个路由，定义要在根目录下启动所有自路由。

export const AppRoutes=[
    {
        path: '',
        redirectTo: 'index',  //项目启动的第一个路由为index
        pathMatch: 'full'
    },
    {  
        path: 'index',
        loadChildren: './index/index.module#IndexModule'
    },
    {
        path: 'login',
        loadChildren: './login/login.module#LoginModule'
    }
]
  1. 修改 app.module.ts 设置根路由
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { IndexComponent } from './index/index.component';


import { RouterModule } from '@angular/router';  //导入路由
import { AppRoutes } from './app.routes'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    FormsModule
     //设置主要路由
    RouterModule.forRoot(AppRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6.在 app.component.html 中定义插座。

<router-outlet></router-outlet>

7.在 app/index 文件夹下新建 index.routes.ts 文件，定义子路由

import { IndexComponent } from './index.component';

export const IndexRoutes= [
    {
        path: '',
        component: IndexComponent
    }
]

8.在 app/index 文件夹下新建 index.module.ts 文件，设置子路由。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {IndexRoutes} from './index.routes';
import { IndexComponent } from './index.component';

@NgModule({
  imports: [
    CommonModule,
    //设置IndexRoutes为子路由
    RouterModule.forChild(<any>IndexRoutes)    
  ],
  declarations: [
    IndexComponent
  ]
})
export class IndexModule { }

9.设置跳转的下一个子路由 login ，在 index.component.ts 文件中设置在 entry() 触发时跳转路由。

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'; //导入router服务

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  entry(): void {
  //跳转到login路由（绝对路径）
    this.router.navigateByUrl("login") 
  }
}

在 index.component.html 里

<h1>我是index页面</h1>
<button (click)="entry()">点击进入</button>

10.在 app/login 里新建 login.routes.ts，定义第二个子路由。

import { LoginComponent } from './login.component';

export const LoginRoutes= [
    {
        path: '',
        component: LoginComponent
    }
]

11.在 app/login 里新建 login.module.ts，设置LoginRoutes为子路由。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import{FormsModule}from '@angular/forms';

import { LoginRoutes } from './login.routes';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    CommonModule,
    //必须导入FormsMoudule，因为此页面用到了数据双向绑定
    FormsModule,
    //将LoginRoutes设置为子路由
    RouterModule.forChild(<any>LoginRoutes)   
  ],
  declarations: [
    LoginComponent
  ]  
})
export class LoginModule { }

12.设置第二个路由 login.component.ts 文件的内容。

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

 public username:string;
 public password:string;

 entry() {
   //必须写this
   let username = this.username;
   let password = this.password;
   if (username == "1" && password == "1"){
     alert("登录成功")
   }
   else{
     alert("登录失败")
   }
 }
}

login.component.html 文件

div class="login">
  <h1>我是login页面</h1>
</div>
<div>
  <label for="">用户名：</label>
  <input  name ="username" type="text" [(ngModel)]="username">
</div>
<div>
  <label for="">密  码：</label>
  <input  name ="password" type="text" [(ngModel)]="password">
</div>
<button (click)="doLogin()">登录</button>

13.运行 ng serve --open 查看。

借鉴参考资料的思路：

在app.module中设置了根路由AppRoutes，于是开始执行app.module中，而app.module设置了跳转的第一个子路由index，在此文件中有该路由，于是去设置的路径下去找IndexModule，于是执行到了index.module，去index.routes找该路由，该路由被渲染的组件为IndexComponent，于是又执行到了index.component文件中，而此文件中又设置了一个绝对路径下的路由login，于是又执行到app.routes下查找有无该路由，有则跳转到指定目录下的login.module文件下找LoginModule，在login.module定义了该路由LoginRoutes，于是去login.routes找到了该路由，该路由被渲染的组件为LoginComponent，于是去login.component文件中找到该组件，执行方法，结束！之所以回去app.routes下查找路由,是根据它设置的找路径找的this.router.navigateByUrl("login")]

avatar
文章
阅读
粉丝