详解angular2实现ng2-router 路由和嵌套路由


Posted in Javascript onMarch 24, 2017

 实现ng2-router路由,嵌套路由

首先配置angular2的时候router模块已经下载,只需要引入即可

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

我们要创建一个嵌套路由,所以需要创建以下文件

  • index.html
  • app.module.ts
  • app.component.ts
  • home.component.ts
  • list.component.ts
  • list-one.component.ts
  • list-two.component.ts

实现效果:

  1. 路由,单机“首页”加载home.component.ts
  2. 单机"列表“加载list.component.ts
  3. 列表中包含嵌套路由,tab页
  4. 单机"标签一"加载list-one.component.ts
  5. 单机"标签二"加载list-one.component.ts

开始配置

index.html界面配置两点

<head>标签中引入 <meta href="/" rel="external nofollow" />

引入路由代码显示标签 引入主组件标签 <my-app></my-app>

就这么简单, index.html界面配置完毕

app.module.ts界面配置路由

import {BrowserModule} from "@angular/platform-browser";
  import {NgModule} from "@angular/core";
  import {RouterModule, Routes} from "@angular/router";

  // 表单 双向数据绑定
  import {FormsModule} from "@angular/forms";
  import {AppComponent} from "./app.component";
  // List中包含两个tab子组件
  import {ListComponent} from "./list.component";
  import {ListOneComponent} from "./list-one.component";
  import {ListTwoComponent} from "./list-two.component";
  import {HomeComponent} from "./home.component";
  // 定义路由, bootstrap默认加载组件就是AppComponent,所以他就是主页导航页,然后添加的路由都在他的模板中。

  // 可以所有代码写在NgModule中, 也可以这样自定义常量,然后使用。

  // 定义常量 嵌套自路由
  const appChildRoutes: Routes = [
   {path: "one", component: ListOneComponent},
   {path: "two", component: ListTwoComponent},
   // 如果地址栏中输入没有定义的路由就跳转到one路由界面
   {
    path: '**', redirectTo: "one"
   }
  ];
  // 定义常量 路由
  const appRoutes:Routes = [
   {path: '', component: HomeComponent},
   {
    path: 'list',
    component: ListComponent,
    children: appChildRoutes
  ];
  // 引用定义的路由
  @NgModule({
   imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
    AppComponent,
    ListComponent,
    HomeComponent,
    ListOneComponent,
    ListTwoComponent
   ],
   bootstrap: [AppComponent]
  })
  export class AppModule {
  
  }

这样就完成了嵌套路由的配置

显示路由内容

app.component.ts

import {Component} from "@angular/core";
  @Component({
   selector: "my-app",
   // templateUrl: "../views/one.html"
   template: `
        <div>
        <!--使用了bootstrap样式的导航,routerLinkActive,表示路由激活的时候,谈价active类样式-->
         <ul class="nav navbar-nav">
          <li routerLinkActive="active"><a routerLink="home">首页</a></li>
          <li routerLinkActive="active"><a routerLink="contact">联系我们</a></li>
          <li routerLinkActive="active"><a routerLink="product">产品</a></li>
         </ul>
         <!--路由内容显示区域-->
         <router-outlet></router-outlet>
        </div>
        `
  })
  export class AppComponent {
  
  }

list.component.ts

import {Component} from "@angular/core";
  @Component({
    selector: "my-list",
    // templateUrl: "../views/list.html"
    template: `
       <div>
        <!-- 子路由连接 -->
        <a routerLink="one">one</a>
        <a routerLink="two">two</a>
        <!-- 路由内容显示标签 -->
        <router-outlet></router-outlet>
       </div>
     `
  })
  export class ListComponent {
    name = "list";
  }

list-one.component.ts

import {Component} from "@angular/core"
  @Component({
    selector: "my-list-one",
    template:`
      {{name}}
    `
  })
  export class ListOneComponent {
    name = "list-one";
    }

list-two.component.ts同理

获取路由参数id (about:id) 添加模块 ActivatedRoute

import {ActivatedRoute} from "@angular/router";  
  export class AboutList {
    id: Object;
    constructor(public route:ActivatedRoute) {
      this.id = {};
    }
    ngOnInit() {
      this.route.params.subscribe(params => {
        this.id = params // {id: "xxx"}
      });
    }
  }

直接获取id值

this.route.snapshot.params["id"]
补助: 路由中的界面跳转
  import {Router} from "@angular/router";
  
  constructor(public router: Router) {
  // 相当于window.location.href,界面跳转
    router.navigateByUrl('home');
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
微信小程序实现底部导航
Nov 05 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
JS实现向iframe中表单传值的方法
Mar 24 #Javascript
JS正则替换去空格的方法
Mar 24 #Javascript
原生js封装自定义滚动条
Mar 24 #Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 #Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
JS得到当前时间的方法示例
Mar 24 #Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
初识Laravel
2014/10/30 PHP
yii中widget的用法
2014/12/03 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php异常处理捕获错误整理
2019/09/23 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
jquery插件懒加载的示例
2020/10/24 jQuery
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
浅谈Python 对象内存占用
2016/07/15 Python
Flask-Mail用法实例分析
2018/07/21 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Python识别html主要文本框过程解析
2020/02/18 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
毕业大学生自荐信
2014/06/17 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
教师辞职书范文
2015/02/26 职场文书
春风化雨观后感
2015/06/11 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
React配置子路由的实现
2021/06/03 Javascript