大佬教程收集整理的这篇文章主要介绍了【Angular】--路由与导航,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
AppModule
模块中,导入RouterModule
。具体如下:
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 {}
@H_944_1@ 此时我们的路由还不能正常工作,因为我们还未配置应用程序路由的相关信息。RouterModule 对象为我们提供了两个静态的方法:forRoot() 和 forChild() 来配置路由信息。
@H_944_1@ RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息,通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用 forRoot() :
// ... import { Routes,RouterModule } from '@angular/router'; export const ROUTES: Routes = []; @NgModule({ imports: [ BrowserModule,RouterModule.forRoot(ROUTES) ],// ... }) export class AppModule {}
@H_944_1@ 我们通过使用const
定义路由的配置信息,然后把它作为参数调用RouterModule.forRoot()
方法,而不是直接使用RouterModule.forRoot([...])
这种方式,这样做的好处是方便我们在需要的时候导出ROUTES
到其它模块中。
@H_944_1@动态路由
@H_944_1@ 如果路由始终是静态的,那没有多大的用处。例如 path: '' 是加载我们 HomeComponent 组件的静态路由。我们将介绍动态路由,基于动态路由我们可以根据不同的路由参数,渲染不同的页面。@H_607_76@
@H_944_1@例如,如果我们想要在个人资料页面根据不同的用户名显示不同的用户信息,我们可以使用以下方式定义路由:
import { HomeComponent } from './home/home.component'; import { ProfileComponent } from './profile/profile.component'; export const ROUTES: Routes = [ { path: '',component: HomeComponent },{ path: '/profile/:username',component: ProfileComponent } ];
这里的关键点是 : ,它告诉 Angular 路由,:username 是路由参数,而不是 URL 中实际的部分。@H_607_76@@H_607_76@
@H_944_1@ 现在我们已经建立一个动态路由,此时最重要的事情就是如何获取路由参数。要访问当前路由的相关信息,我们需要先从 @angular/router 模块中导入 ActivatedRoute ,然后在组件类的构造函数中注入该对象,最后通过订阅该对象的 params 属性,来获取路由参数,具体示例如下:
import { Component,OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ SELEctor: 'profile-page',template: ` <div class="profile"> <h3>{{ username }}</h3> </div> ` }) export class SetTingsComponent implements OnInit { username: String; constructor(private route: ActivatedRoutE) {} ngOnInit() { this.route.params.subscribe((params) => this.username = params.username); } }
介绍完动态路由,我们来探讨一下如何创建子路由。@H_607_76@@H_607_76@子路由@H_607_76@ 实际上每个路由都支持子路由,假设在我们 /setTings 设置页面下有 /setTings/profile 和 /setTings/password 两个页面,分别表示个人资料页和修改密码页。@H_607_76@@H_607_76@
@H_944_1@ 我们可能希望我们的 / setTings 页面拥有自己的组件,然后在设置页面组件中显示 / setTings/profile 和 / setTings/password 页面。我们可以这样做:
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 {}在这里,我们在 settTings 路由中定义了两个子路由,它们将继承父路由的路径,因此修改密码页面的路由匹配地址是 /setTings/password ,依此类推。 @H_607_76@ @H_607_76@ 接下来,我们需要做的最后一件事是在我们的 SetTingsComponent 组件中添加 router-outlet 指令,因为我们要在设置页面中呈现子路由。如果我们没有在 SetTingsComponent 组件中添加 router-outlet 指令,尽管 /setTings/password 匹配修改密码页面的路由地址,但修改密码页面将无法正常显示。具体代码如下: @H_607_76@
import { Component } from '@angular/core'; @Component({ SELEctor: 'setTings-page',template: ` <div class="setTings"> <setTings-header></setTings-header> <setTings-sidebar></setTings-sidebar> <router-outlet></router-outlet> </div> ` }) export class SetTingsComponent {}
以上是大佬教程为你收集整理的【Angular】--路由与导航全部内容,希望文章能够帮你解决【Angular】--路由与导航所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。