详解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 EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Nuxt.js实战详解
Jan 18 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 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处理restful请求的路由类分享
2014/02/27 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
设定php简写功能的方法
2019/11/28 PHP
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
js实现抽奖效果
2017/03/27 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python编写登陆接口的方法
2017/07/10 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python tornado修改log输出方式
2019/11/18 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
个人四风问题原因分析及整改措施
2014/09/28 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
新学期家长寄语2016
2015/12/03 职场文书
中学教代会开幕词
2016/03/04 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
何时使用Map来代替普通的JS对象
2021/04/29 Javascript