Angular基础知识学习（三）

hresh 581 0

Angular基础知识学习（三）

路由

简单路由案例

1、命令创建项目

ng new angualrdemo04

执行该命令时，会有这么一段内容询问你是否需要创建路由。

Would you like to add Angular routing? (y/N)

输入 y 便可给项目中增加路由设置，新建的项目文件结构如下：

Angular基础知识学习（三）

查看 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、页面测试

Angular基础知识学习（三）

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、页面测试

Angular基础知识学习（三）

动态路由的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、页面测试

Angular基础知识学习（三）

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、页面测试

Angular基础知识学习（三）

父子路由

在网上冲浪时可以经常看到点击头部页面按钮，主页会

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、页面测试

Angular基础知识学习（三）

7、小结

根据测试结果可知，当点击按钮进行页面跳转时，页面不需要刷新，网址发生改变即可。

模块

自定义模块

Angular 内置模块

Angular基础知识学习（三）

当我们项目比较小的时候可以不用自定义模块。 但是当我们项目非常庞大的时候把所有的组
件都挂载到根模块里面不是特别合适。 所以这个时候我们就可以自定义模块来组织我们的项
目。

添加自定义模块

接下来我们新建一个项目 angularDemo07，然后添加自定义模块。

ng g module module/user

//如果需要添加路由，则在新建模块时执行下面命令。
ng g module module/user --routing

ng g component module/user

Angular基础知识学习（三）

查看上图可以发现，user 模块和项目自带的 app 模块结构一致，只是少了路由配置文件。接着我们在 user 模块中新建组件。

添加自定义模块下的组件
ng g component module/user/components/profile
ng g component module/user/components/address
ng g component module/user/components/order

新建完成的项目结构如图所示：

Angular基础知识学习（三）

我们查看 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) }
];

参考文献

Javascript异步编程的4种方法

JS 异步编程六种方案

JavaScript 异步编程

本文作者为hresh，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

分享