详解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复制功能调用实现方案
Dec 13 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
Bootstrap基础学习
Jun 16 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
3
2006/10/09 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php实现cookie加密的方法
2015/03/10 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python批量爬取下载抖音视频
2019/06/17 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
食品业务员岗位职责
2014/03/18 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
新春寄语大全
2014/04/09 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
职工年度考核评语
2014/12/31 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python