真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Angular4學(xué)習筆記router的簡單使用

router，也就是路由，是前端中一個比較重要的概念。通過router把特定的地址和對應(yīng)的頁面關(guān)聯(lián)后分離出來，以達到解耦的目的。在src/app目錄下新建一個detail的文件夾，建立一個名為gundam-detail.component的文件。

創(chuàng)新互聯(lián)公司是專業(yè)的固始網(wǎng)站建設(shè)公司，固始接單;提供網(wǎng)站設(shè)計、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行固始網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

import { Component } from '@angular/core';
import { Gundam } from '../../model/gundam';
@Component({
  template: `
    

    {{selectedGundam.name}}
    {{selectedGundam.type}}
    

  `
})
export class GundamDetailComponent {
    selectedGundam: Gundam;
}

ps：有關(guān)命名，基本上是采用xxx+“-”+“業(yè)務(wù)類型”+“組件類型”的命名方式，至少官方文檔上是這么推薦的。當然給組件起名叫豬頭三也可以，但是標準的命名可以增加組件的可讀性。即便是不介意隨意起名坑后來的維護者，誰也不能確定很長時間以后自己不會再對同一段代碼進行重構(gòu)。所以，做人還是要厚道。不寫注釋也就算了，起名還是規(guī)范一點好。

ps2：有關(guān)分包的方式，有的人喜歡把view放一起、controller放一起，再根據(jù)邏輯進一步細分；也有人是倒過來，先分邏輯再分view和controller。這個好像沒有什么統(tǒng)一的定論，我個人是喜歡后一種，所以本項目采用后一種分法。

目前文件里沒什么東西，只是簡單的把app.component.ts里的temple給搬過來而已。

先明確需求，再開始寫router。

需求：點擊gundam列表頁面中的任意item，可以跳轉(zhuǎn)到該gundam的詳情頁。

作為angular的組件，希望在頁面中使用router，必須先在app.module.ts里聲明。

ps：之前的業(yè)務(wù)和app.module.ts沒什么關(guān)系，但這并不是說它不重要。app.module.ts相當于android的mainifist文件，對整個項目進行統(tǒng)籌管理。

打開app.module.ts：

Angular4學(xué)習筆記router的簡單使用

Angular4學(xué)習筆記router的簡單使用

  1. imports：在組件頁面里用到基礎(chǔ)類。
  2. declarations：現(xiàn)有custom組件聲明。
  3. bootstrap：可以理解為Android的main launch，項目啟動時從那個組件進入。

需要使用router前先引入：

import { RouterModule }  from '@angular/router';

因為要調(diào)用RouterModule的forRoot方法，RouterModule.forRoot 又是項目中用到的基礎(chǔ)類，所以需要寫在imports里。

 imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot()
 ],

RouterModule.forRoot 接受兩個參數(shù)，第一個是route數(shù)組來表明跳轉(zhuǎn)，第二個參數(shù)常年忽略，我也不知道有什么用。

route類包括2個比較關(guān)鍵的屬性：path和component，通過訪問path，可以找到唯一的component。

在forRoot里添加上包含主頁和詳情頁2個component的route數(shù)組。

RouterModule.forRoot([
  {
    path: '',
    component: AppComponent
  },
  {
    path: '',
    component: GundamDetailComponent
  }
])

app.module.ts現(xiàn)在看起來是這樣的：

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import { RouterModule }  from '@angular/router';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: '',
        component: AppComponent
      },
      {
        path: '',
        component: GundamDetailComponent
      }
      ])
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2個path都還空著，因為還少一個關(guān)鍵的東西，就算寫上也會報錯：

Angular4學(xué)習筆記router的簡單使用

Error: Cannot find primary outlet to load ‘AppComponent'

在angular里，router是要搭配標簽router-outlet來使用的，換句話說router決定顯示哪個組件，而由router-outlet決定顯示在哪里。

在app.component.ts里的template加上標簽

Angular4學(xué)習筆記router的簡單使用

然后不出意外的顯示了2個主頁:

Angular4學(xué)習筆記router的簡單使用

app.component.ts是一個組件也是一個頁面，angular先從bootstrap里進入了app.component.ts渲染了界面（也就是router-outlet上面的部分）。碰到又去找router，發(fā)現(xiàn)對應(yīng)的router也有組件，于是又加載了一遍。

所以為了正常顯示，也要把主頁也單獨抽出來。所有組件通過app.component.ts里的來進行加載。而app.component.ts作為整個demo的最外層容器可以進行一些公共的操作（典型：后退動作）。

在src下新建host包，新建gundam-host.component.ts文件。
基本上可以把整個app挪過來，刪除掉out標簽，刪掉selector(暫時用不到)。

import {
Component
} from '@angular/core';
import { Gundam } from '../../model/gundam';
import { GUNDAMS } from './../../service/data';
@Component({
  template: `
    

      
        {{gundam.name}}
      
    

  `
})
export class GundamHostComponent {
  gundam: Gundam = {
    name: '海牛',
    type: 'NewType'
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; // 定義一個selectedGudam作為展示詳情的變量
  onSelected (gundam: Gundam): void {
    this.selectedGundam = gundam; // 通過參數(shù)賦值
  }
}

app.component.ts只保留標簽，其他一概去掉。

修改app.module.ts文件，導(dǎo)入gundam-host.component.ts并把GundamHostComponent 增加到組件聲明declarations里。

修改route里的path所指向的component，默認進入后顯示主頁組件：

before

Angular4學(xué)習筆記router的簡單使用 

after

Angular4學(xué)習筆記router的簡單使用

path的值為”(空字符串)的表示不需要增加子路徑。

修改詳情頁的路徑:

{
  path: 'detail',
  component: GundamDetailComponent
}

在主頁里增加跳轉(zhuǎn)連接:

Angular4學(xué)習筆記router的簡單使用

點擊跳轉(zhuǎn)(路徑已改變)

Angular4學(xué)習筆記router的簡單使用

現(xiàn)在點擊主頁的高達列表的item后，可以跳轉(zhuǎn)到一個空白的詳情頁。之所以是空白，是因為詳情頁的值是需要由主頁進行傳遞的?，F(xiàn)在主頁詳情頁分家以后，需要通過路由來進行值傳遞。

傳值的方法有很多種，甚至可以傳的值也有很多種。
目前我先用最笨的方法：將gundam類轉(zhuǎn)化為一個字符串，將字符串傳遞到詳情頁面后再轉(zhuǎn)化為gundam類。

在app.component.ts文件的class里添加函數(shù)：

parseGundamToString(gundam: Gundam): string {
  return gundam.name + '&' + gundam.type;
} // 將gundam類轉(zhuǎn)化為固定格式的字符串

修改app.component.ts文件的template，訪問gundam路徑時轉(zhuǎn)化傳遞轉(zhuǎn)化過的gundam字符串


  
  {{gundam.name}}

修改詳情頁的path

{
  path: 'detail/:gundam',
  component: GundamDetailComponent
}

/:gundam 是一個占位符，又是參數(shù)說明。表示傳遞過來的參數(shù)屬性是gundam。

這樣在detail文件中，就可以從url的連接中拿到傳遞過來的高達字符串。

獲得這個字符串的時機，應(yīng)該是在在detail頁面初始化的時候。Angular提供了所謂的的“鉤子”(hook)，用來標示component的活動周期—其實也就是是類似于Android里onStart或者onCreate一樣的方法。

在gundam-detail.component.ts的中添加OnInit鉤子,或者說接口：

import { Component, OnInit } from '@angular/core';

在class后面加implements關(guān)鍵詞和OnInit來實現(xiàn)該接口：

export class GundamDetailComponent implements OnInit {
  selectedGundam: Gundam ;
  ngOnInit(): void {
  }
}

剩下的事情，就是讀取連接上傳來的參數(shù)就可以了。

讀取連接上傳遞的參數(shù)還是要用到router里的幾個類，所以需要在detail里導(dǎo)入。

import { ActivatedRoute, Params }  from '@angular/router';

導(dǎo)入完成后，通過在構(gòu)造器里注入的方式進行調(diào)用：

（有關(guān)注入，現(xiàn)在暫時沒有說到）

constructor(
private route: ActivatedRoute){}

angular會自動創(chuàng)建ActivatedRoute的實例。

先在ngOnInit里輸出看看params是什么

this.route.params.switchMap((params: Params) => console.log(params))

ps：switchMap是angular官方給的拿取url參數(shù)的方法，也是需要預(yù)先導(dǎo)入才可以使用：

import 'rxjs/add/operator/switchMap';

ps2: 有關(guān)箭頭函數(shù)

(params: Params) => this.gundamStr = params['gundam']

是一個箭頭函數(shù),等同于

function(params){
  this.gundamStr = params['gundam']
}

其中params是switchMap的返回值，返回的即是通過路由連接傳遞過來的參數(shù)所在的類。

ps3: 箭頭函數(shù)真的是整個ES6里最惡心的東西，之一。

控制臺中 輸出：

Angular4學(xué)習筆記router的簡單使用

傳遞過來的參數(shù)，是一個gundam類格式化輸出的字符串，所以還要在detail里補充一個反格式化字符串到gundam類的函數(shù)。

parseStringToGundam(str: string): Gundam {
  const temp = str.split('&');
  const tempGundam: Gundam = {
  name: temp[0],
  type: temp[1]
  };
  return tempGundam;
}

最終,獲得detail的初始化是這個樣子的

Angular4學(xué)習筆記router的簡單使用

ngOnInit(): void {
  this.route.params // 通過注入的方式拿到route里的參數(shù)params
  .switchMap((params: Params) => this.gundamStr = params['gundam']) // 通過參數(shù)拿到gundam字符串并付給detail里的一個臨時變量
  .subscribe(() => this.selectedGundam = this.parseStringToGundam(this.gundamStr)); // 通過反格式化函數(shù)解析臨時變量并返回給作為顯示的model
}

移動web頁面間傳值確實沒有什么太好的方法，angular和react都是如此。以前我們的做法是短的參數(shù)直接掛連接傳走，長的大的或者object的參數(shù)就先保存本地，然后第二個頁面再從本地讀取。

但是像android那樣扔一個intent里直接就過去了的方式，確實沒有。

回首頁：

Angular4學(xué)習筆記router的簡單使用 

點擊一個列表：

Angular4學(xué)習筆記router的簡單使用 

包結(jié)構(gòu)：

Angular4學(xué)習筆記router的簡單使用 

總的來說，業(yè)務(wù)被分開了，結(jié)構(gòu)干凈多了。雖然現(xiàn)在還體現(xiàn)不出來，但是寫到后來就覺得心花怒放，磨刀不誤砍柴工功啊。

作為router，也可以分離的。

目前我的項目里只有2個頁面，如果多起來-比如20來個，那么app.module.ts又會變的亂七八糟。

所以要把router也給扔出去。

新建一個文件app-routing.module.ts，然后把footRoot平移過來(帶上引用)。

在app-routing.module.ts文件里，也需要ngModul。個人理解ngModul就相當于一個基類指示器，導(dǎo)出class后以便被其他類引用。

import {
NgModule
} from '@angular/core';
import { RouterModule }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: GundamHostComponent
      },
      {
        path: 'detail/:id',
        component: GundamDetailComponent
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后既然已經(jīng)有了這個類，可以導(dǎo)入到app.module.ts里使用使得整個文件看起來清爽一些。

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule // 調(diào)用路由
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent,
    GundamHostComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

當然，官方文檔又進行了進一步簡化。

既然forRoot是一個Route數(shù)組，那么數(shù)組也可以單獨抽出來，當然進一步抽取也可以放到另一個文件里。

import {
NgModule
} from '@angular/core';
import { RouterModule, Route }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
const routes: Route[] = [
  {
    path: '',
    component: GundamHostComponent
  },
  {
    path: 'detail/:gundam',
    component: GundamDetailComponent
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

我個人比較偷懶，就先抽取到這一步。

現(xiàn)在連主頁面和詳情頁面都被分開了，項目的耦合度又進一步降低。

再接再厲，我們繼續(xù)把業(yè)務(wù)邏輯給也分離出來。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。


網(wǎng)站標題：Angular4學(xué)習筆記router的簡單使用
分享網(wǎng)址：http://weahome.cn/article/gehpec.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部