詳解Angular中的Route路由

本篇文章帶大家一起了解Angular中的路由（Route）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

Angular 路由（Route）

我們可以將路由器理解成控制整個應用程式狀態的視圖對象， 每個應用程式都有一個路由器； 路由器的另一個作用是為每個視圖分配唯一的url， 可以利用這個url 來使應用程式之間跳到某一個特定的視圖狀態。單頁應用程式其實就是一個視圖狀態的集合。

相關教學推薦：《angular教學》

單頁應用程式（SPA）

一個單頁應用程式是首頁面只載入一次， 不再重複刷新， 只是改變頁面部分內容的應用。 Angular 應用程式是單頁應用， 在 Angular 中使用路由器來實現根據使用者的操作來改變頁面的內容而不重新載入頁面。單頁應用程式可以理解為一個視圖狀態的集合。

路由物件

#Routes 路由陣列

路由器需要先設定才會有路由資訊, 並用RouterModule.forRoot 方法來設定路由器。當瀏覽器的 URL 變更時， 路由器會尋找對應的 Route（路由）， 並據此決定該顯示哪個元件。
基礎設定：

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

RouterOutlet 路由出口

RouterOutlet 是來自路由模組中的指令，它的用法類似於元件。它扮演一個佔位符的角色，用於在模板中標出一個位置，路由器將會把要顯示在這個出口處的組件顯示在這裡。

 <h1 id="组件的内容显示在-詳解Angular中的Route路由-outlet-下方">组件的内容显示在（詳解Angular中的Route路由-outlet）下方</h1>
 <詳解Angular中的Route路由-outlet></詳解Angular中的Route路由-outlet>

Router 路由器

使用 Router 物件導覽。

constructor(private 詳解Angular中的Route路由: Router) {}

toAComponent() {
    this.詳解Angular中的Route路由.navigate(['/common/a']);
    // 或 this.詳解Angular中的Route路由.navigateUrl('common/a');
}

RouterLink 路由器連結

路由連結 url 必須以 ‘/’ 開頭。

<a [詳解Angular中的Route路由Link]="[&#39;/&#39;]">主页</a>
<a [詳解Angular中的Route路由Link]="[&#39;/common/b&#39;, id]">B组件</a>
<詳解Angular中的Route路由-outlet></詳解Angular中的Route路由-outlet>

ActivatedRoute 啟動的路由

目前啟動的路由的路徑和參數可以透過 ActivateRoute 的路由服務來取得。

• 常用屬性： url路由路徑的Observable 對象，是一個由路由路徑中的各個部分組成的字串數組.data一個Observable，其中包含提供給路由的data 物件。也包含由解析守衛（resolve guard）解析而來的值。 paramMap

  屬性	#說明

  ###一個 Observable，其中包含一個由目前路由的必要參數和可選參數組成的 map 物件。用這個 map 可以取得來自同名參數的單一值或多重值。 ############queryParamMap######一個 Observable，其中包含一個對所有路由都有效的查詢參數組成的 map 物件。用這個 map 可以取得來自查詢參數的單一值或多重值。 ############

在路由时传递数据

• 在查询参数中传递数据

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

• 在路由路径中传递数据

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

• 在路由配置中传递数据

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

• 示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 从参数中获取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get('id');
    });

   // 或
  // this.activated.snapshot.queryParamMap.get('id');

    // 从路径中获取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get('id');
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。

subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。

重定向路由

在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：

// 当访问根路径时会重定向到 home 路径
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];

子路由

子路由配置语法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

辅助路由

辅助路由又兄弟路由，配置语法：

// 路由配置
{path: 'xxx', component: XxxComponent, outlet:'xxxlet'},
{path: 'yyy', component: XxxComponent, outlet:'yyylet'}

// 使用
<詳解Angular中的Route路由-outlet></詳解Angular中的Route路由-outlet>
<詳解Angular中的Route路由-outlet name="xxxlet"></詳解Angular中的Route路由-outlet>

// 链接
<a [詳解Angular中的Route路由Link]="[&#39;/home&#39;,{outlets:{xxxlet: &#39;xxx&#39;}}]">Xxx</a>

当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。

路由守卫（guard）

CanActivate/CanActiveChild：处理导航到某路由的情况

当用户不满足这个守卫的要求时就不能到达指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}

CanDeactivate：处理从当前路由离开的情况

如果不满足这个守卫的要求就不能离开该路由。

// 泛型中 AComponent 代表要守卫的组件。
export class DemoGuard2 implements CanDeactivate<AComponent> {
 canDeactivate(component: AComponent): boolean {
   // 根据 component 的信息进行具体操作
   retturn true;
 }
}

Resolve：在路由激活之前获取路由数据

在进入路由时就可以立刻把数据呈现给用户。

@Injectable()
export AResolve implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get(&#39;id&#39;);
     // 可以根据路由中的信息进行相关操作
  }
}

最后，需要将路由守卫添加到路由配置中：

const appRoutes: Routes = [
  { 
    path: 'common/a', 
    component: AComponent,
    canActivate: [DemoGurad1],
    canDeactivate: [DemoGuard2],
    resolve: {data: AResolve}
   },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

更多编程相关知识，请访问：编程入门！！

以上是詳解Angular中的Route路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！