欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

详解angular2实现ng2-router 路由和嵌套路由

程序员文章站 2022-05-26 08:55:45
 实现ng2-router路由，嵌套路由 首先配置angular2的时候router模块已经下载，只需要引入即可 import {routermo...

 实现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');
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 详解HTTPS 的原理和 NodeJS 的实现

下一篇： JS实现微信摇一摇原理解析

推荐阅读