【Angular】路由跳转(代码跳转) |
您所在的位置：网站首页 › 代码跳转页面怎么设置 › 【Angular】路由跳转(代码跳转) |
【Angular】路由跳转(代码跳转)
|
【WHAT】 在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。 【HOW】 1. 定义路由配置 2. 创建根路由模块 3. 添加路由插座 (以上是基本且必须的三个步骤) 【示例：(文件如下)】 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） 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(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设置页面 欢迎加入大米时代！ 进入系统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(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文件 前台登录 用户名： 密 码： 登录程序执行，访问文件的顺序依次是： 思路是这样的： 在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")] 【扩展】 declarations:声明自己写的东西（如组件）imports:通常是导入程序已封装号的东西（如router的forRoot()方法）快捷键 新建文件(指定目录下)： ng g c 文件名新建module： ng g module 名称启动服务的同时在浏览器中打开：ng serve --open该运行的端口： ng serve --port 端口号标签： 直接打标签名+双击Tab（不用输 |
1.在app.routes定义路由,主要设置有: 
【本文地址】
今日新闻 |
推荐新闻 |