详解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的获取JS文件中的字符串内容
Feb 14 Javascript
javascript的console.log()用法小结
May 31 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
vue el-upload上传文件的示例代码
Dec 21 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
PHP6 mysql连接方式说明
2009/02/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
PHP7新增函数
2021/03/09 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
树莓派实现移动拍照
2019/06/22 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python如何导入依赖包
2020/07/13 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
顶岗实习计划书
2014/01/10 职场文书
体操比赛口号
2014/06/10 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA