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

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

yarn add @angular/router
# OR
npm i --save @angular/router

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
 imports: [
 BrowserModule,
 RouterModule
 ],
 bootstrap: [
 AppComponent
 ],
 declarations: [
 AppComponent
 ]
})
export class AppModule {}

// ...
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
 imports: [
 BrowserModule,
 RouterModule.forRoot(ROUTES)
 ],
 // ...
})
export class AppModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
 imports: [
 CommonModule,
 RouterModule.forChild(ROUTES)
 ],
 // ...
})
export class ChildModule {}

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

import { HomeComponent } from './home/home.component';

export const ROUTES: Routes = [
 { path: '', component: HomeComponent }
];

@NgModule({
 imports: [
 BrowserModule,
 RouterModule.forRoot(ROUTES)
 ],
 // ...
})
export class AppModule {}

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

@Component({
 selector: 'app-root',
 template: `
 
  
Our app
  
 

import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

export const ROUTES: Routes = [
 { path: '', component: HomeComponent },
 { path: '/profile/:username', component: ProfileComponent }
];

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

@Component({
 selector: 'profile-page',
 template: `
 
  
{{ username }}
 

import { SettingsComponent } from './settings/settings.component';
import { ProfileSettingsComponent } from './settings/profile/profile.component';
import { PasswordSettingsComponent } from './settings/password/password.component';

export const ROUTES: Routes = [
 { 
  path: 'settings', 
  component: SettingsComponent,
  children: [
   { path: 'profile', component: ProfileSettingsComponent },
   { path: 'password', component: PasswordSettingsComponent }
  ]
 }
];

@NgModule({
 imports: [
  BrowserModule,
  RouterModule.forRoot(ROUTES)
 ],
})
export class AppModule {}

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

@Component({
 selector: 'settings-page',
 template: `
  
   
   
   
  

Component-less routes

另一個(gè)很有用的路由功能是 component-less 路由。使用 component-less 路由允許我們將路由組合在一起，并讓它們共享路由配置信息和 outlet。

例如，我們可以定義 setttings 路由而不需要使用 SettingsComponent 組件：

import { ProfileSettingsComponent } from './settings/profile/profile.component';
import { PasswordSettingsComponent } from './settings/password/password.component';

export const ROUTES: Routes = [
 {
  path: 'settings',
  children: [
   { path: 'profile', component: ProfileSettingsComponent },
   { path: 'password', component: PasswordSettingsComponent }
  ]
 }
];

@NgModule({
 imports: [
  BrowserModule,
  RouterModule.forRoot(ROUTES)
 ],
})
export class AppModule {}

此時(shí)， /settings/profile 和 /settings/password 路由定義的內(nèi)容，將顯示在 AppComponent 組件的 router-outlet 元素中。

loadChildren

我們也可以告訴路由從另一個(gè)模塊中獲取子路由。這將我們談?wù)摰膬蓚€(gè)想法聯(lián)系在一起 - 我們可以指定另一個(gè)模塊中定義的子路由，以及通過將這些子路由設(shè)置到特定的路徑下，來充分利用 component-less 路由的功能。

讓我們創(chuàng)建一個(gè) SettingsModule 模塊，用來保存所有 setttings 相關(guān)的路由信息：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [
 {
  path: '',
  component: SettingsComponent,
  children: [
   { path: 'profile', component: ProfileSettingsComponent },
   { path: 'password', component: PasswordSettingsComponent }
  ]
 }
];

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(ROUTES)
 ],
})
export class SettingsModule {}

需要注意的是，在 SettingsModule 模塊中我們使用 forChild() 方法，因?yàn)?code> SettingsModule 不是我們應(yīng)用的主模塊。

另一個(gè)主要的區(qū)別是我們將 SettingsModule 模塊的主路徑設(shè)置為空路徑 ('')。因?yàn)槿绻覀兟窂皆O(shè)置為 /settings ，它將匹配 /settings/settings ，很明顯這不是我們想要的結(jié)果。通過指定一個(gè)空的路徑，它就會匹配 /settings 路徑，這就是我們想要的結(jié)果。

那么 /settings 路由信息，需要在哪里配置？答案是在 AppModule 中。這時(shí)我們就需要用到 loadChildren 屬性，具體如下：

export const ROUTES: Routes = [
 {
  path: 'settings',
  loadChildren: './settings/settings.module#SettingsModule'
 }
];

@NgModule({
 imports: [
  BrowserModule,
  RouterModule.forRoot(ROUTES)
 ],
 // ...
})
export class AppModule {}

需要注意的是，我們沒有將 SettingsModule 導(dǎo)入到我們的 AppModule 中，而是通過 loadChildren 屬性，告訴 Angular 路由依據(jù) loadChildren 屬性配置的路徑去加載 SettingsModule 模塊。這就是模塊懶加載功能的具體應(yīng)用，當(dāng)用戶訪問 /settings/** 路徑的時(shí)候，才會加載對應(yīng)的 SettingsModule 模塊，這減少了應(yīng)用啟動時(shí)加載資源的大小。

另外我們傳遞一個(gè)字符串作為 loadChildren 的屬性值，該字符串由三部分組成：

1. 需要導(dǎo)入模塊的相對路徑

2. # 分隔符

3. 導(dǎo)出模塊類的名稱

了解完路由的一些高級選項(xiàng)和功能，接下來我們來介紹路由指令。

Router Directives

除了 router-outlet 指令，路由模塊中還提供了一些其它指令。讓我們來看看它們?nèi)绾闻c我們之前介紹的內(nèi)容結(jié)合使用。

routerLink

為了讓我們鏈接到已設(shè)置的路由，我們需要使用 routerLink 指令，具體示例如下：

當(dāng)我們點(diǎn)擊以上的任意鏈接時(shí)，頁面不會被重新加載。反之，我們的路徑將在 URL 地址欄中顯示，隨后進(jìn)行后續(xù)視圖更新，以匹配 routerLink 中設(shè)置的值。

友情提示：我們也可以將 routerLink 的屬性值，改成數(shù)組形式，以便我們傳遞特定的路由信息

如果我們想要鏈接到動態(tài)的路由地址，且該地址有一個(gè) username 的路由變量，則我們可以按照以下方式配置 routerLink 對應(yīng)的屬性值：

 Go to {{ username }}'s profile.

routerLinkActive

在實(shí)際開發(fā)中，我們需要讓用戶知道哪個(gè)路由處于激活狀態(tài)，通常情況下我們通過向激活的鏈接添加一個(gè) class 來實(shí)現(xiàn)該功能。為了解決上述問題，Angular 路由模塊為我們提供了 routerLinkActive 指令，該指令的使用示例如下：

通過使用 routerLinkActive 指令，當(dāng) a 元素對應(yīng)的路由處于激活狀態(tài)時(shí)，active 類將會自動添加到 a 元素上。

最后，我們來簡單介紹一下 Router API。

Router API

我們可以通過路由還提供的 API 實(shí)現(xiàn)與 routerLink 相同的功能。要使用 Router API，我們需要在組件類中注入 Router 對象，具體如下：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
 selector: 'app-root',
 template: `
  
   
Our app
   
  
 `
})
export class AppComponent {
 constructor(private router: Router) {}
}

組件類中注入的 router 對象中有一個(gè) navigate() 方法，該方法支持的參數(shù)類型與 routerLink 指令一樣，當(dāng)調(diào)用該方法后，頁面將會自動跳轉(zhuǎn)到對應(yīng)的路由地址。具體使用示例如下：

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

@Component({
 selector: 'app-root',
 template: `
  
   
Our app
   
  
 `
})
export class AppComponent implements OnInit {
 constructor(private router: Router) {}
 ngOnInit() {
  setTimeout(() => {
   this.router.navigate(['/settings']);
  }, 5000);
 }
}

若以上代碼成功運(yùn)行，用戶界面將在 5 秒后被重定向到 /settings 頁面。這個(gè)方法非常有用，例如當(dāng)檢測到用戶尚未登錄時(shí)，自動重定向到登錄頁面。

另一個(gè)使用示例是演示頁面跳轉(zhuǎn)時(shí)如何傳遞數(shù)據(jù)，具體如下：

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

@Component({
 selector: 'app-root',
 template: `
  
   
Users
   
    
    
   
   
  
 `
})
export class AppComponent implements OnInit {
 users: Username[] = [
  { name: 'toddmotto', id: 0 },
  { name: 'travisbarker', id: 1 },
  { name: 'tomdelonge', id: 2 }
 ];
 
 constructor(private router: Router) {}
 
 handleSelect(event) {
  this.router.navigate(['/profile', event.name]);
 }
}

Angular 路由的功能非常強(qiáng)大，既可以使用指令方式也可以使用命令式 API，希望本文可以幫助你盡快入門，若要進(jìn)一步了解路由詳細(xì)信息，請?jiān)L問 - Angular Router 官文文檔。

我有話說

除了使用 navigate() 方法外還有沒有其它方法可以實(shí)現(xiàn)頁面導(dǎo)航？

Angular Router API 為我們提供了 navigate() 和 navigateByUrl() 方法來實(shí)現(xiàn)頁面導(dǎo)航。那為什么會有兩個(gè)不同的方法呢？

使用 router.navigateByUrl() 方法與直接改變地址欄上的 URL 地址一樣，我們使用了一個(gè)新的 URL 地址。然而 router.navigate() 方法基于一系列輸入?yún)?shù)，產(chǎn)生一個(gè)新的 URL 地址。為了更好的區(qū)分它們之間的差異，我們來看個(gè)例子，假設(shè)當(dāng)前的 URL 地址是：

/inbox/11/message/22(popup:compose)

當(dāng)我們調(diào)用 router.navigateByUrl('/inbox/33/message/44') 方法后，此時(shí)的 URL 地址將變成 /inbox/33/message/44 。但如果我們是調(diào)用 router.navigate('/inbox/33/message/44') 方法，當(dāng)前的 URL 地址將變成 /inbox/33/message/44(popup:compose) 。

感謝各位的閱讀！關(guān)于“Angular 4.x路由的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！