文章目录
路由
简单路由案例
1、命令创建项目
ng new angualrdemo04
执行该命令时,会有这么一段内容询问你是否需要创建路由。
Would you like to add Angular routing? (y/N)
输入 y 便可给项目中增加路由设置,新建的项目文件结构如下:
查看 app-routing.module.ts 文件内容:
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
接着我们创建几个组件。
2、创建组件
ng g component components/product
ng g component components/news
ng g component components/home
3、在 app-routing.module.ts 配置路由,根据不同的 URL, 跳转到不同的页面
import {NewsComponent} from './components/news/news.component';
import {HomeComponent} from './components/home/home.component';
import {ProductComponent} from './components/product/product.component';
const routes: Routes = [
{
path: 'home', component: HomeComponent
},
{
path: 'news', component: NewsComponent
},
{
path: 'product', component: ProductComponent
}
];
4、app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
<header class="header">
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
<a [routerLink]="[ '/product' ]" routerLinkActive="active-link">商品</a>
</header>
<router-outlet></router-outlet>
5、app.component.css 配置样式
.header{
height: 44px;
line-height: 44px;
background-color: black;
}
.header a{
color: #ffffff;
padding: 10px 40px;
}
.header .active {
color: red;
}
.header .active-link{
color: orange;
}
6、页面测试
7、小结
routerLink 里面用到的 path 就是在 app-routing.module.ts 里配置的,routerLinkActive 作用是当此链接指向的路由激活时,该指令就会往宿主元素上添加一个 CSS 类。
<router-outlet></router-outlet>
可以简单把它理解为: 页面的占位符,动态加载,会被替换掉的。
当点击 home、about、 dashboard 时, 在导航栏的下方,会被对应的 XX.component.html 替换掉。
关于 <router-outlet>
的讲解可以参看: 干什么用的?
默认路由
当启动项目时,会默认打开链接 http://localhost:4200/ ,但是该页面没有任何信息,因此我们设置该链接默认打开 home 页面。
在 app-routing.module.ts 配置默认路由,以下两种配置方式都可以,但是必须在最后位置。
const routes: Routes = [
{
path: 'home', component: HomeComponent
},
{
path: 'news', component: NewsComponent
},
{
path: 'product', component: ProductComponent
},
{
path: '**', component: HomeComponent
// path: '**', redirectTo: 'home'
}
];
还有一种方式,配置可以在任意位置,个人习惯放在首位。
const routes: Routes = [
{
path: '', redirectTo: 'home', pathMatch: 'full'
}
{
path: 'home', component: HomeComponent
},
{
path: 'news', component: NewsComponent
},
{
path: 'product', component: ProductComponent
}
];
重定向路由需要一个 pathMatch
属性,来告诉路由器如何用 URL 去匹配路由的路径,否则路由器就会报错。 在本应用中,路由器应该只有在完整的 URL等于 ''
时才选择 HeroListComponent
组件,因此要把 pathMatch
设置为 'full'
。
动态路由
对于上文中的 news 组件,我们新建一个 news-detail 组件,用来显示新闻详情。
1、配置动态路由
const routes: Routes = [
{
path: '', redirectTo: 'home', pathMatch: 'full'
},
{
path: 'home', component: HomeComponent
},
{
path: 'news', component: NewsComponent
},
{
path: 'newsDetail/:id', component: NewsDetailComponent
},
{
path: 'product', component: ProductComponent
},
];
2、news.component.ts
nums: any[] = [];
constructor() {
}
ngOnInit(): void {
for (let i = 0; i < 10; i++) {
this.nums.push('这是第' + i + '条新闻');
}
}
3、news.component.html
<p>news works!</p>
<ul>
<li *ngFor="let item of nums, let key = index"> -->
<!-- <a [routerLink]="['/newsDetail',key]" >{{key}} ---- {{item}}</a> -->
<a routerLink="/newsDetail/{{key}}" >{{key}} ---- {{item}}</a>
</li>
</ul>
上述两种链接方式都是正确的,routerLink=“xxxx”,表示静态链接,另一种则表示动态链接,可以通过动态值来生成链接。
4、在 news-detail.component.ts 获取动态路由的值
import {ActivatedRoute} from '@angular/router';
export class NewsDetailComponent implements OnInit {
constructor(public router: ActivatedRoute) {
}
ngOnInit(): void {
this.router.params.subscribe((data) => {
console.log(data);
});
}
}
5、页面测试
动态路由的JS跳转
普通跳转
1、同新建 NewsDetail 组件一样,再新建一个 ProductDetail 组件。
2、product.component.html
<button (click)="getProduct()">js跳转到商品详情页面</button>
<button (click)="getHome()">js跳转到主页面</button>
3、product.component.ts
import { Router } from '@angular/router';
export class ProductComponent implements OnInit {
constructor(public router: Router) {
}
getProduct() {
this.router.navigate(['/productDetail/', '123']);
}
getHome() {
this.router.navigate(['/home']);
}
}
3、页面测试
get传值
1、product.component.html
<button (click)="getNews()">js关于get传值</button>
2、在 product.component.ts 额外引入 NavigationExtras
import {Component, OnInit} from '@angular/core';
import {Router, NavigationExtras} from '@angular/router';
export class ProductComponent implements OnInit {
constructor(public router: Router) {
}
getNews() {
let params: NavigationExtras = {
queryParams: {
'aid': '123'
}
};
this.router.navigate(['/news'],params);
}
}
3、在 news 组件中获取 get 传值
constructor(public router: ActivatedRoute) {
console.log(this.router.queryParams);
}
4、页面测试
父子路由
在网上冲浪时可以经常看到点击头部页面按钮,主页会
1、新建组件
ng g component components/home
ng g component components/home/welcome
ng g component components/home/setting
ng g component components/product
ng g component components/product/pcate
ng g component components/product/plist
2、配置路由
import {HomeComponent} from './components/home/home.component';
import {ProductComponent} from './components/product/product.component';
import {WelcomeComponent} from './components/home/welcome/welcome.component';
import {SettingComponent} from './components/home/setting/setting.component';
import {PcateComponent} from './components/product/pcate/pcate.component';
import {PlistComponent} from './components/product/plist/plist.component';
const routes: Routes = [
{
path: 'home', component: HomeComponent,
children:[
{
path:'welcome',component:WelcomeComponent
},
{
path:'setting',component:SettingComponent
},
{
path:'**',component:WelcomeComponent
}
]
},
{
path: 'product', component: ProductComponent,
children:[
{
path:'pcate',component:PcateComponent
},
{
path:'plist',component:PlistComponent
},
{
path:'**',component:PlistComponent
}
]
},
{
path: '**', component: HomeComponent
}
];
3、app.component.html
<header class="header">
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/product' ]" routerLinkActive="active">商品</a>
</header>
<router-outlet></router-outlet>
4、home.component.html
<div class="content">
<div class="left">
<a [routerLink]="['/home/welcome']" >欢迎首页</a>
<br>
<br>
<a [routerLink]="['/home/setting']" >系统设置</a>
</div>
<div class="right">
<router-outlet></router-outlet>
</div>
</div>
5、style.css
.content{
width: 100%;
height: 400px;
display: flex;
}
.left{
padding: 20px 20px;
width: 200px;
border-right: 1px black solid;
height: 400px;
}
.right{
flex: 1px;
}
6、页面测试
7、小结
根据测试结果可知,当点击按钮进行页面跳转时,页面不需要刷新,网址发生改变即可。
模块
自定义模块
Angular 内置模块
当我们项目比较小的时候可以不用自定义模块。 但是当我们项目非常庞大的时候把所有的组
件都挂载到根模块里面不是特别合适。 所以这个时候我们就可以自定义模块来组织我们的项
目。
添加自定义模块
接下来我们新建一个项目 angularDemo07,然后添加自定义模块。
ng g module module/user
//如果需要添加路由,则在新建模块时执行下面命令。
ng g module module/user --routing
ng g component module/user
查看上图可以发现,user 模块和项目自带的 app 模块结构一致,只是少了路由配置文件。接着我们在 user 模块中新建组件。
添加自定义模块下的组件
ng g component module/user/components/profile
ng g component module/user/components/address
ng g component module/user/components/order
新建完成的项目结构如图所示:
我们查看 user.module.ts 文件内容:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';
import { OrderComponent } from './components/order/order.component';
@NgModule({
declarations: [UserComponent, ProfileComponent, AddressComponent, OrderComponent],
imports: [
CommonModule
]
})
export class UserModule { }
如果想要访问 user 组件,必须要在 user 模块中将该组件暴露出来。修改 user.module.ts 文件:
@NgModule({
// user模块里的组件
declarations: [UserComponent, ProfileComponent, AddressComponent, OrderComponent],
// 暴露组件,让其被其他模块所访问
exports: [UserComponent],
imports: [
CommonModule
]
})
然后在根模块中引入 user 模块。
import {UserModule} from './module/user/user.module';
imports: [
BrowserModule,
AppRoutingModule,
UserModule
],
最后在 app.component.html 文件中添加 user 组件,即可看到 user.component.html 中的内容。
<h2>app组件</h2>
<app-user></app-user>
假设想要访问 user 模块下的 order 组件,则必须先将其暴露,才可以在 app.component.html 中访问。
添加自定义模块下的服务
ng g service module/user/services/common
然后在 user 模块中引入该服务。
import {CommonService} from './services/common.service';
providers:[CommonService]
同理我们再创建一个 product 模块,以及它下面的组件。
ng g module module/product --routing
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo
路由配置
通过配置路由,可以实现懒加载,从而不必在 app.module.ts 文件中引入自定义模块,就可以访问自定义模块下的组件内容。
1、首先在 app-routing.module.ts 文件中配置路由
const routes: Routes = [
// { path: 'user', loadChildren: './module/user/user.module#UserModule'},
// 更改路径无效
// { path: 'user', loadChildren: 'src/app/module/user/user.module#UserModule'},
{ path: 'user', loadChildren: () => import('./module/user/user.module').then(m => m.UserModule) },
// { path: 'product', loadChildren: './module/product/product.module#ProductModule' }
// { path: 'product', loadChildren: 'src/app/module/product/product.module#ProductModule' }
{ path: 'product', loadChildren: () => import('./module/product/product.module').then(m => m.ProductModule) }
];
2、在自定义模块中配置路由
const routes: Routes = [
{ path: '', component: UserComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'address', component: AddressComponent },
{ path: 'order', component: OrderComponent }
];
问题记录
自定义模块路由配置懒加载时报错
错误信息如下:
EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'
解决办法:
const routes: Routes = [
// { path: 'user', loadChildren: './module/user/user.module#UserModule'},
// 更改路径无效
// { path: 'user', loadChildren: 'src/app/module/user/user.module#UserModule'},
{ path: 'user', loadChildren: () => import('./module/user/user.module').then(m => m.UserModule) },
// { path: 'product', loadChildren: './module/product/product.module#ProductModule' }
// { path: 'product', loadChildren: 'src/app/module/product/product.module#ProductModule' }
{ path: 'product', loadChildren: () => import('./module/product/product.module').then(m => m.ProductModule) }
];