详解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 相关文章推荐
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
javascript实现放大镜功能
Dec 09 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实现定时器任务(Timer)
2015/07/31 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python读写unicode文件的方法
2015/07/10 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python星号*与**用法分析
2018/02/02 Python
python实现单向链表详解
2018/02/08 Python
Python反转序列的方法实例分析
2018/03/21 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
学生周末回家住宿长期请假条
2014/02/15 职场文书
C++程序员求职信范文
2014/04/14 职场文书
学校四群教育实施方案
2014/06/12 职场文书
西游记读书笔记
2015/06/25 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
离婚财产分割协议书
2015/08/11 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
Python 图片添加美颜效果
2022/04/28 Python
MySQL数据库 安全管理
2022/05/06 MySQL