收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

詳解angular2實現ng2-router 路由和嵌套路由

實現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

實現效果:

路由,單機“首頁”加載home.component.ts 單機"列表“加載list.component.ts 列表中包含嵌套路由,tab頁 單機"標簽一"加載list-one.component.ts 單機"標簽二"加載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');
  }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

angular仿支付寶密碼框輸入效果
項目需求,使用ng寫一個密碼框格子支付模塊,一開始使用一個input+letter-spacing來分割字符,但是發現間距非常不好控制,隨著字符的輸入文本框字符串

使用vue.js寫一個tab選項卡效果
通常我們寫tab選項卡的時候,一般都是用jq等去操作dom,給同級元素移除active類,然后,給被點擊元素添加active類,但是在vue.js中,我們能不去操作dom我們就盡量

vue中用動態組件實現選項卡切換效果
最近在研究vue的路上,那么今天也算個學習筆記吧!導航按鈕:divclass="tab-title"[email protected]="a='tab1'"router-linkto='/collectnewcars'新車/router-linkem/em/[email protected]="a='tab2'"rout

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
来几局百人牛牛有规律不 重庆时时彩直播 三肖六码中特免费么开 黑龙江时时彩大小单双玩法 云顶娱乐的彩票真的吗 重庆时时开奖结果表 广东时时开奖助手 pt游戏哪些平台有 北京pk10直播网站 时时彩组三开出规律 5a彩票倒闭了吗 助赢北京pk10手机版 2011年捕鱼达人旧版本 手机版时时彩分析软件 精准免费彩票计划软件11远5 宝马线上亚洲娱乐第一