【Angular】路由跳转(代码跳转)

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

【HOW】

1. 定义路由配置
2. 创建根路由模块
3. 添加路由插座
(以上是基本且必须的三个步骤)

【示例：(文件如下)】

1.在app.routes定义路由,主要设置有:

• 设置启动的第一个路由
• 定义要在根目录下启动所有子路由
  

export const AppRoutes=[
    {
        path: '',redirectTo: 'showmain',//项目启动的第一个路由为showmain
        pathMatch: 'full'
    },{  
        path: 'showmain',loadChildren: './showmain/showmain.module#ShowmainModule'
    },{
        path: 'login',loadChildren: './login/login.module#LoginModule'
    }
]

2.创建根路由（app.module.ts）,主要设置有

• 设置根路由

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {RouterModule} from '@angular/router';  //导入路由
import { AppComponent } from './app.component'; 
import {AppRoutes} from './app.routes';

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

3.定义插座（在app.component.html）

<router-outlet></router-outlet>

4.定义子路由showmain.routes.ts

import { ShowmainComponent } from './showmain.component';

export const ShowmainRoutes= [
    {
        path: '',component: ShowmainComponent
    }
]

5.设置子路由ShowmainRoutes

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {ShowmainRoutes} from './showmain.routes';
import { ShowmainComponent } from './showmain.component';

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

6.设置跳转的下一个子路由login
在showmain.component.ts文件中设置在doIn（）触发时跳转路由

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

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

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

（之所以第二个页面要设置跳转，而跳转到第一个子路由没用到该句，是因为在根路由下已设置了项目启动后跳转的第一个路由）

• 在showmain.component.html设置页面

<h1>欢迎加入大米时代！</h1>
<button (click)="doIn()">进入系统</button>

7.定义第二个子路由LoginRoutes
login.routes.ts

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

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

8.设置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 { }

9.设置第二个路由即页面的主要内容
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;

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

login.component.html文件

<div class="login">
  <h1>前台登录</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>

程序执行，访问文件的顺序依次是：

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

【扩展】

1. declarations:声明自己写的东西（如组件）
2. imports:通常是导入程序已封装号的东西（如router的forRoot()方法）

3. 快捷键

   • 新建文件(指定目录下)：ng g c 文件名
   • 新建module： ng g module 名称
   • 启动服务的同时在浏览器中打开：ng serve --open
   • 该运行的端口：ng serve --port 端口号
   • 标签：直接打标签名+双击Tab（不用输<）

4. 有数值双向绑定时，无论html中用没用到表单，都要导入forms：import { FormsModule } from '@angular/forms';

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!