详解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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP中overload与override的区别
2017/02/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Pandas中resample方法详解
2019/07/02 Python
Python底层封装实现方法详解
2020/01/22 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
《东方明珠》教学反思
2014/04/20 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Python语言中的数据类型-序列
2022/02/24 Python