Angular基础知识学习（三）

时间 2020-04-22

原文原文链接

路由简单路由案例默认路由动态路由动态路由的JS跳转普通跳转get传值父子路由模块自定义模块添加自定义模块添加自定义模块下的组件添加自定义模块下的服务路由配置问题记录自定义模块路由配置懒加载时报错参考文献javascript

路由

简单路由案例

一、命令建立项目css

ng new angualrdemo04
复制代码

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

Would you like to add Angular routing? (y/N)
复制代码

输入 y 即可给项目中增长路由设置，新建的项目文件结构以下：java

查看 app-routing.module.ts 文件内容：nginx

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

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
复制代码

接着咱们建立几个组件。web

二、建立组件编程

ng g component components/product
ng g component components/news
ng g component components/home
复制代码

三、在 app-routing.module.ts 配置路由，根据不一样的 URL，跳转到不一样的页面 promise

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
  }
];
复制代码

四、app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由ruby

<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>
复制代码

五、app.component.css 配置样式app

.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;
}
复制代码

六、页面测试

七、小结

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 组件，用来显示新闻详情。

一、配置动态路由

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
  },
];
复制代码

二、news.component.ts

  nums: any[] = [];

  constructor() {
  }

  ngOnInit(): void {
    for (let i = 0; i < 10; i++) {
      this.nums.push('这是第' + i + '条新闻');
    }
  }
复制代码

三、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"，表示静态连接，另外一种则表示动态连接，能够经过动态值来生成连接。

四、在 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);
    });
  }

}
复制代码

五、页面测试

动态路由的JS跳转

普通跳转

一、同新建 NewsDetail 组件同样，再新建一个 ProductDetail 组件。

二、product.component.html

<button (click)="getProduct()">js跳转到商品详情页面</button>
<button (click)="getHome()">js跳转到主页面</button>
复制代码

三、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']);
  }

}
复制代码

三、页面测试

get传值

一、product.component.html

<button (click)="getNews()">js关于get传值</button>
复制代码

二、在 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);
  }
}
复制代码

三、在 news 组件中获取 get 传值

  constructor(public router: ActivatedRoute) {
    console.log(this.router.queryParams);
  }
复制代码

四、页面测试

父子路由

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

一、新建组件

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
复制代码

二、配置路由

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
  }
];
复制代码

三、app.component.html

<header class="header">
  <a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
  <a [routerLink]="[ '/product' ]" routerLinkActive="active">商品</a>

</header>

<router-outlet></router-outlet>
复制代码

四、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>
复制代码

五、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;
}
复制代码

六、页面测试

七、小结

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

模块

自定义模块

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 文件中引入自定义模块，就能够访问自定义模块下的组件内容。

一、首先在 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) }
];
复制代码

二、在自定义模块中配置路由

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 异步编程