详解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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
javascript this指向相关问题及改变方法
Nov 19 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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python 实现任务管理清单案例
2020/04/25 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
搞笑创意广告语
2014/03/17 职场文书
品德评语大全
2014/05/05 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
小学生毕业评语
2014/12/26 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Python socket如何解析HTTP请求内容
2022/02/12 Python
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
MySQL 逻辑备份 into outfile
2022/05/15 MySQL