详解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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
前端性能优化及技巧
May 06 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php中session与cookie的比较
2015/01/27 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
页面中js执行顺序
2009/11/09 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python实现textrank关键词提取
2018/06/22 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL