1.安装

安装Angular脚手架

cnpm install -g @angular/cli

创建一个angular项目

ng new 项目名  --skip-install 

如果不跳过安装，ng会自动进行依赖下载，可能会比较慢。我们需要增加–skip-install后缀取消依赖安装，然后通过cnpm去阿里的镜像地址进行下载

cnpm install

运行项目

ng serve --open

2.Angular目录结构

• node_modules：存放项目所需的各种依赖
• package.json：项目的配置文件
• tsconfig.json：typescript配置文件
• browserlist：支持浏览器的配置文件
• style.css：全局css文件
• src：
  • app：存放组件和模块
    • app.component.ts：根组件
    • app.module.ts 根模块
    • app.component.ts：根组件对应的html模板
    • app.component.ts：根组件对应的css文件
    • app.routing.module.ts：根组件的路由模块
  • assets：静态资源文件
  • environments：环境相关的文件
  • index.html：入口文件
  • main.ts：项目入口

3 @NgModule

该装饰器用于接收一个元数据对象，告诉angular如何编译和启动应用

该装饰器等于一个angular模块，下面是我们创建angualr项目时的根模块app.module.ts

如果我们需要创建一个自定义模块，可以使用以下命令

ng g module 目录/模块名称

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { PersonlistComponent } from './components/personlist/personlist.component';@NgModule({declarations: [AppComponent,PersonlistComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]
})

@NgModule元数据解析

• declarations：配置当前项目运行的组件
• imports：配置当前模块运行依赖的其他模块
• providers：配置项目所需的服务
• bootstrap：指定应用的主视图（跟模块）

4 @Component

@Compnent代表一个组件，一个模块中由多个组件构成，一个页面也是由多个组件构成

下面是根模块中根组件的@Compnent示例

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})

@Component元数据解析

• selector：指令名称，我们在html中需要使用某个组件时通过app-root标签来引入
• templateUrl：组件对应的的html模板
• styleUrls：组件的css文件

创建组件
在angular中创建任何部分都是通过命令行的形式增加，因为每个组件、服务、模块都对应多个文件，所以我们需要通过命令的形式一次性增加一组文件，并在根模块中引入新增组件的依赖（组件会自动引入，服务不会）

ng g component 目录/组件名

该目录会默认创建到到app目录下，如果我们app下有多个模块，则需要在对应模块的目录下创建组件
当我们创建完组件后，组件对应的类会被引入到对应模块中，并添加到declarations参数中，只有这样添加到该参数中，我们才能在该模块的其他组件中使用目标组件

5.数据绑定和指令

5.1单向绑定

• [ ]:单向动态绑定属性
• {{}}：表达式把数据绑定到 HTML，其中可以包含简单表达式

下面是[]的一个例子

<!--[]-->
<label [title]="title">aaa</label>

上面[title]="title"表示将我们组件类中的title绑定到label标签中的title属性中，如果组件类中的title发生变化，label中的title的值也会修改。
我们如果需要将组件类中的某个成员变量的值绑定到某个属性中就使用该表达式 [属性名] = "成员变量"

下面是{{}}插值表达式的一个例子，它与上面[]的效果差不多，但是不同的是它不一定要绑定到属性中，可以直接在html页面中当作普通文本去使用

<!--{{}}-->
<label>{{title}}</label>

上面表达式会将{{title}}替换为组件类中title对应的值
插值表达式中还能放入一些简单表达式，例如1+1，但是不能涉及引用相关的复杂表达式，所以不要乱用

5.2 双向绑定

angualr的双向绑定用于表单控件，首先将表单控件与组件的某个成员遍历绑定，某一方发生变化时，另一方也跟着变化

1.要使用双向绑定，首先我们需要在模块中引入表单模块import { FormsModule } from ‘@angular/forms’;并在模块中的imports属性中引入该模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';import { AppComponent } from './app.component';
import { PersonlistComponent } from './components/personlist/personlist.component';
import { FormComponent } from './components/form/form.component';
import { ToListComponent } from './components/to-list/to-list.component';@NgModule({declarations: [AppComponent,PersonlistComponent,FormComponent,ToListComponent],imports: [BrowserModule,FormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

当我们完成表单模块的引入后，我们就可以在该模块中使用双向绑定指令[(ngModel)]

2.通过[(ngModel)]进行双向绑定

<div><div class="item">姓名：<input type="text" [(ngModel)]="result.username"></div><div class="item">性别：男<input type="radio" value="1" name="gender" [(ngModel)]="result.gender">女<input type="radio" value="0" name="gender" [(ngModel)]="result.gender"></div><div class="item">居住城市：<select [(ngModel)]="result.city"><option *ngFor="let city of cities" [value]="city">{{city}}</option></select></div><div class="item">兴趣：<span *ngFor="let hobby of result.hobbies;let key = index"><input type="checkbox" [id]="'check'+key" checked="hobby.check" [(ngModel)]="hobby.check">{{hobby.name}}</span></div><div class="item">data：{{result|json}}</div>
</div>

不同的表单组件有不同的表现

• text：将value值（输入框内的值）绑定到目标变量上
• radio：将value值（我们选中的radio对应的value）绑定到目标变量上，注意多个raido都需要双向绑定，且绑定到同一个变量上
• select：将下拉框选择的value（我们下拉框选中的当前值的value）绑定到变量中，只需要在select中双向绑定即可
• checkbox：将多选框是否被选中的布尔值绑定到目标变量上，注意多个checkbox都需要双向绑定

5.3 *ngFor

*ngFor在angular中用来进行for循环
personlist.component.html

<ul><li *ngFor="let person of persons">{{person.name}}---{{person.age}}</li>
</ul>

personlist.component.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-personlist',templateUrl: './personlist.component.html',styleUrls: ['./personlist.component.css']
})
export class PersonlistComponent implements OnInit {persons:any[] = [{name:"张三",age:44},{name:"李四",age:33}]constructor() { }ngOnInit(): void {}}

在personlist.component.ts文件中我们可以看到组件类中存在一个叫做persons的数组对象，里面包含两个对象，所以在组件对应的html模板中（personlist.component.html）我们通过*ngFor去对该数组进行遍历显示。*ngFor="let person of persons"中就是使用我们的for of表达式进行操作
我们在ngFor中取出的person的作用域就在ngFor指定对应的标签范围内，比如上面的而例子中，person的作用域就在li标签的包围中

5.4 *ngIf

angular通过ngIf进行条件判断
下面是一个ngIf的一个简单例子

<div *ngIf="flag">hello world</div>

当我们flag的值为false时，该div不会显示，为true时才会显示

5.5 ngSwitch

angular中的switchcase

<ul [ngSwitch]="status"><li *ngSwitchCase="1">已支付</li><li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li><li *ngSwitchDefault>无效</li>
</ul>

当status为1时显示已支付，根据status的值不同显示不同的额li

5.6 事件绑定

事件绑定通过(事件名)="方法名()"完成绑定
通过()我们可以监听括号内对应的事件，当事件被触发时，会自动调用我们绑定的方法

<input type="button" (click)="say()">

上面这个例子表示该buton按钮的click会触发组件类中的say()方法,如果需要传入原生事件，可以增加$event，也就是

<input type="button" (click)="say($event)">

5.7 管道操作符

Angular 的常用内置管道函数：
DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。
它们用于模板表达式中，只要使用管道操作符(|) 就行了。管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式

常用实例

<div class="alert alert-warning"> <p>{{title|uppercase }}</p> <p>{{title|uppercase|lowercase }}</p> <p>{{this|json}}</p> <p>{{time|date:'yyyy-MM-dd'}}</p> <p>{{number|percent}}</p> <p>{{number|currency:'CNY'}}</p> 
</div>

---

6.服务

在angular中，我们经常会在多个组件中使用到相同的方法，但是组件之间并不能互相访问对方的方法，所以这时候我们可以引入服务，将公共的方法放在服务中，当一个组件需要用到某个方法时，引入目标服务即可

在 Angular 中，要把一个类定义为服务，就要用 @Injectable() 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。

你的应用中所需的任何依赖，都必须使用该应用的注入器来注册一个提供者，以便注入器可以使用这个提供者来创建新实例。 对于服务，该提供者通常就是服务类本身。

首先我们需要通过命令创建一个服务

ng g service 路径/服务名

在服务被创建后不会像组件一样被自动引入到模块中，所以如果我们需要在某个组件中使用该服务，需要在对应的模块中引入该服务

这里创建了一个名为counter的服务，并在根模块中引入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { BottomComponent } from './components/bottom/bottom.component';import { CounterService } from './services/counter.service';@NgModule({declarations: [AppComponent,HeaderComponent,BottomComponent],imports: [BrowserModule],providers: [CounterService],bootstrap: [AppComponent]
})
export class AppModule { }

在我们需要用到该服务的组件中，我们需要再次引入服务，并在构造函数的参数中声明对应类型的参数，运行时服务会被注入

当 Angular 创建组件类的新实例时，它会通过查看该组件类的构造函数，来决定该组件依赖哪些服务或其它依赖项。

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CounterService } from '../../services/counter.service';@Component({selector: 'app-bottom',templateUrl: './bottom.component.html',styleUrls: ['./bottom.component.css']
})
export class BottomComponent implements OnInit {@Input() msg:string;@Output() private out = new EventEmitter();addCount:any;getCount:any;//注入CounterServiceconstructor(public counter:CounterService) { this.addCount = counter.addCount;this.getCount = counter.getCount;}emitMsg(){this.out.emit('我是bottom的msg')}showMsg(){alert(this.msg)}ngOnInit(): void {}}

在angular中我们可以直接使用localStorage操作浏览器的本地数据库，使用JSON.Stringfy将对象进行序列化，使用JSON.parse进行反序列化

---

7.父子组件交互

在开发中我们经常需要父子组件进行数据交互，因此angular为我们提供了下面几种交互方式

7.1 @ViewChild

Anguar中可通过@ViewChild操作DOM

首先为某个组件声明id

<div #box></box>

在组件类中通过@ViewChild完成组件的获取

@ViewChild('box') myBox:any;

然后如果我们想操作组件的dom对象，在方法中通过获取到的组件对象获取dom对象

this.myBox.nativeElement

上述三步就是获取某个dom对象的方法

下面我们再说一说如何通过@ViewChild操作子组件
与上面方式一样，只是省去了第三步，因为第二步就已经获取到了组件对象，可以通过组件对象调用目标组件的方法和成员变量

如果我们div组件中有个hello()函数，我们可以这样调用

this.myBox.hello()

7.2 @Input

angular通过@Input为我们提供了一种父组件向子组件传值的方法

假设现在有两个组件一个header和一个bottom，bttom被包含在header中

<app-bottom  [msg]="msg" ></app-bottom>

[msg]="msg"与前面属性绑定的意思相同，将header中的msg变量的值绑定到app-bottom中的msg属性中
此时，我们还不能直接拿到传过来的值，需要使用@Input

@Input() msg:string;

只有再botom组件中声明了这样一个变量，父组件才能够通过属性绑定的方式向子组件传值
不仅是值，也可以是方法，甚至如果[msg]=“this”，则会将父组件对象传递给子组件，这样在子组件中可以调用父组件的方法和变量

我们这样这样理解，通过@Input的变量就相当于当前组件的一个属性，通过在标签中我们可以像属性赋值

7.3 @Output

angular通过@Input为我们提供了一种子组件向父组件传值的方法
其实这种方式的原理就是子组件发起一个事件，事件中包含一些参数，通过父组件还需要监听该事件。就相当于我们监听click事件一样
除了Output我们还需引入EventEmitter，我们需要通过这个对象发起事件

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CounterService } from '../../services/counter.service';@Component({selector: 'app-bottom',templateUrl: './bottom.component.html',styleUrls: ['./bottom.component.css']
})
export class BottomComponent implements OnInit {@Output() private out = new EventEmitter();constructor() { }emitMsg(){this.out.emit('我是bottom的msg')}
}

<app-bottom (out)="showMsg($event)"></app-bottom>

在上面这个例子中，Bottom组件首先引入了Output, EventEmitter，再通过创建一个EventEmitter赋值给一个@Output()对象，其中@Output()对象的对象名代表事件的名字，因此我们在父组件中通过(out)进行事件的监听，我们this.out.emit(‘我是bottom的msg’)提交事件，并传入了参数，而在父组件中可以通过$event对象获取到事件的参数

---

8.生命周期

Angualr中组件的生命周期函数如下

1. 构造函数
2. ngOnChanges()：父组件向子组件传值时，值发生变化时会触发
3. ngOnInit()：初始化指令/组件完成，通过该回调函数会用来做请求数据，只执行一次
4. ngDoCheck()：类中成员变量的值发生改变
5. ngAfterContentInit()：组件完成渲染
6. ngAfterContentChecked()：类中成员变量的值发生改变
7. ngAfterViewInit()：视图加载完成，如果需要操作dom，需要在这里执行，在前面执行会出错
8. ngAfterViewChecked()：类中成员变量的值发生改变
9. ngOnDestory()：销毁组件时，可以做一些保存的收尾工作
   

---

9.异步操作

angular中可以通过以下几种方式执行异步操作

• 回调函数
• Promise
• Rxjs异步数据流

9.1 回调函数

下面例子中我们声明了一个async1异步方法，执行一个定时器，当3秒后，会异步执行我们传入的的f()回调方法

async1(f:any){setTimeout(() => {f();}, 3000);}

9.2 Promise

Promise是ES6自带的一种异步方式，下面是promise的例子

async2():any{return new Promise(function (resolve, reject) {if (执行某些操作成功了) {resolve({name:'resolve'});}else {//执行失败reject({name:'err'});}})}async2().then(function(contents){//成功console.log(contents)
},function(err){//拒绝console.error(err.message)
})

9.3 Rxjs异步数据流

Rxjs异步数据流是angular自身提供的一种异步方式，相较于 Promise，Rxjs功能更加强大

• 支持异步操作中途撤回
• 可多次执行，每次都能取到值
• 提供了多种工具函数

下面是具体的例子

首先我们需要引入Obervable

import {Observable} from 'rxjs'

定义一个返回Observable的异步方法

async3():any{return new Observable(observer => {//返回异步数据observer.next('async operation')})}

订阅事件

emitMsg(){this.async3().subscribe(value => console.log(value))}

10.请求

angular中请求有以下几种

• get
• post
• jsonp
• axios

10.1 get

首先在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';
imports: [BrowserModule,HttpClientModule
]

在用到的组件类中引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

get 请求数据

var api = "http://a.itying.com/api/productlist";
this.http.get(api).subscribe(response => {console.log(response);
});

10.2 post

前面几步与get相同，不同的地方在请求数据这一步,以及好需要引入HttpHeader来设置请求头

const httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "http://127.0.0.1:3000/doLogin";
this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe(response => {console.log(response);
});

this.http.post(api,body,httpOptions)

10.3 jsonp

通过jsonp获取服务器数据是跨域的一种解决方案

首先在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入

import {HttpClientModule,HttpClientJsonpModule} from
'@angular/common/http';
imports: [BrowserModule,HttpClientModule,HttpClientJsonpModule
]

在用到的组件类引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

jsonp 请求数据

var api = "http://a.itying.com/api/productlist";
this.http.jsonp(api,'callback').subscribe(response => {
console.log(response);
});

10.4 axios

除了前几种方式，还可以在Angular 中使用第三方模块 axios 请求数据
安装 axios

cnpm install axios --save

用到的组件类中引入 axios

import axios from 'axios';axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});

封装service作为http服务

import { Injectable } from '@angular/core';
import axios from 'axios';
@Injectable({providedIn: 'root'
})
export class HttpserviceService {constructor() { }axiosGet(api){return new Promise((resolve,reject)=>{axios.get(api).then(function (response) {// handle success     resolve(response)});})}  
}

11.路由

路由就是根据不同的url地址，动态地让根组件挂载其他组件来实现一个单页面应用

单页面应用的优劣

优点：
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
缺点：
1、分功能模块的鉴权不好实现。
2、不利于SEO。
3、初次加载耗时相对增多。
4、导航不可用，如果一定要导航需要自行实现前进、后退。

11.1 创建路由模块

当我们创建angular项目时，会提示我们是否安装路由，如果当时没有选择路由，可选用下面命令创建路由模块

ng generate module app-routing --flat --module=app

11.2 配置路由映射

在路由模块中配置路由映射
典型的Angular路由（Route）有两个属性：

1、path：一个用于匹配浏览器地址栏中URL的字符串。

2、component：当导航到此路由时，路由应该创建哪个组件。

如果说你希望当URL为http://localhost:4200/homePage时，首先要导入HomePageComponent；以便在Route中引用它

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "../home-page/home-page.component";const routes: Routes = [{ path: 'homePage', component: HomePageComponent }
];
@NgModule({exports: [RouterModule]
})
export class AppRoutingModule { }

如果我们在路由的组件中还拥有一些子路由，我们可以在路由的children属性中配置
这样说有些抽象

现在假设我们的网站有一个头部导航栏和一个侧边栏，导航栏的点击会使得侧边栏的组件发生变化，这就是一个单层路由，但是既然我们有一个侧边栏，说明我们也需要根据侧边栏的选项在右边显示对应组件页面，因此，这样的路由就是嵌套的

下面是一个带参数传递的嵌套路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeSideComponent } from './components/home-side/home-side.component';
import { NewsSideComponent } from './components/news-side/news-side.component';
import { SportsSideComponent } from './components/sports-side/sports-side.component';
import { ContentComponent } from './components/content/content.component';const routes: Routes = [{path:'home',component:HomeSideComponent,children:[{path:'detail/:id',component:ContentComponent}]},{path:'news',component:NewsSideComponent,children:[{path:'detail/:id',component:ContentComponent}]},{path:'sports',component:SportsSideComponent,children:[{path:'detail/:id',component:ContentComponent}]}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

上面例子中，如果我们需要访问嵌套的路由组件，我们需要加上外层路由的地址加上内层路由的地址

11.3 RouterModule.forRoot()

初始化路由器，并让它开始监听浏览器的地址变化。（添加到 @NgModule.imports 数组中）

imports: [ RouterModule.forRoot(routes) ]

11.4 添加路由出口

<router-outlet></router-outlet>   // src/app/app.component.html

11.5 添加默认路由

有时候我们希望一进入页面即使是空的路径也会被跳转到某个路径
这里有两种方案
方案一

{ path: '', redirectTo: '/homePage', pathMatch: 'full' }

现在再次访问项目，你会发现地址栏默认会把一个空路径重定向到’/homePage’的路由；并且首页也加载了HomePageComponent。

方案二

{ path: '**', component:DashboardComponent}

**路径是一个通配符，表示除了以上几种path,任何的路径都会加载DashboardComponent组件，这个记得写在路由配置最后。

11.6 添加路由链接(routerLink)

不应该让用户只能把路由的 URL 粘贴到地址栏中。他们还应该能通过点击链接进行导航。

添加一个

<div>home-page works!<nav><a routerLink="/details">点击查看详情</a></nav>
</div>

同时需要把DetailsComponent引入到AppRoutingModule中。

点击查看详情这个链接。地址栏变成了/details，并且页面跳转到详情页。

11.7 添加详情视图（HTML传参）

现在假设我们首页展示的是一个文章列表，然后我们需要点击每一遍文章查看详情；如果说我们要导航到id为11的文章详情视图，类似于http://localhost:4200/heroes/11的URL。

首先打开AppRoutingModule并导入HeroesComponent。

import {HeroesComponent} from "./heroes/heroes.component";

然后把一个参数化路由添加到 AppRoutingModule.routes 数组中，它要匹配指向文章详情视图的路径。

{ path: 'heroes/:id', component: HeroesComponent }

path 中的冒号（:）表示 :id 是一个占位符，它表示某个特定英雄的 id。

此刻，路由就准备就绪了。

然后，我们需要修改HTML页面中的文章列表跳转链接，让它们能够通过参数化的路由进行导航到文章详情页面。

<nav><a routerLink="/heroes/{{id}}">点击查看文章详情</a><!--数组格式传参--><a [routerLink]="['/heroes', num]">点击查看文章详情</a>
</nav>

现在我们刷新页面点击查看文章详情，你发现，地址栏已经更改为http://localhost:4200/heroes/11，页面展示也已经跳转到文章详情页面模块

11.8 js页面跳转（传参）

我们现在需要通过js传参跳转到HeroesComponent（几个常用的方法）：

1、先添加下列导入语句：

import { Router } from '@angular/router';//引入

然后把 Router注入到构造函数中，将它们的值保存到私有变量里：

constructor( private router: Router) { }//注入到构造函数

2、传递路由参数

单参传递

navigate()该方法支持的参数类型和routerLink指令一样，所以它们的作用也是一样的：

this.router.navigate(['heroes', id]);

或者：

this.router.navigate(['heroes']);

多参传递

this.router.navigate(['heroDetail'], {queryParams: {productId: '1',title: 'moon'})

3、我们注意到还有一个：navigateByUrl（），这个叫做绝对路由；

this.router.navigateByUrl('home');

区别：navigateByUrl（）和navigate（）的区别点是：navigateByUrl不是根据参数来确定路由地址的。

11.9 从路由参数中提取id

1、先添加下列导入语句：

import { ActivatedRoute } from ‘@angular/router’;
然后把 ActivatedRoute注入到构造函数中，将它们的值保存到私有变量里：

constructor(private route: ActivatedRoute,
) {}

ActivatedRoute 保存着到这个 HeroesComponent 实例的路由信息。 这个组件对从 URL 中提取的路由参数感兴趣。 其中的 id 参数就是要显示的英雄的 id。

2、获取路由参数

方法一：

 this.route.queryParams.subscribe(queryParams => {let productId = queryParams.productId;let title = queryParams.title;});

方法二：

代码如下：

  public params;  //公有变量ngOnInit() {this.getData();}getData() {this.route.params.subscribe(params => {this.params = params;console.log(this.params);});}

这样获取的是一个对象，直接获取id就可以了。

方法三：

代码如下：

ngOnInit(): void {this.getData();
}getData(): void {const id = +this.route.snapshot.paramMap.get('id');console.log(id);
}

11.10 回到原路

1、先添加下列导入语句：

import { Location } from '@angular/common';

然后把 Location 服务注入到构造函数中，将它们的值保存到私有变量里：

constructor(private location: Location
) {}

location 是一个 Angular 的服务，用来与浏览器打交道。 稍后，你就会使用它来导航回上一个视图。

2、点击返回页面：

通过点击浏览器的后退按钮，可以回到上一个你进入的页面。

把一个后退按钮添加到组件模板的底部，并且把它绑定到组件的 goBack() 方法。

<button (click)="goBack()">go back</button>

在组件类中添加一个 goBack() 方法，利用注入的Location 服务在浏览器的历史栈中后退一步。

goBack(): void {this.location.back();
}

---

12.自定义模块

10.1 创建自定义模块

执行 ng g module modules/user， 生成 user.module.ts

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { AddressComponent } from './components/address/address.component';import { UserComponent } from './user.component';import { OrderComponent } from './components/order/order.component';import { CommonService } from './services/common.service'@NgModule({declarations: [AddressComponent, UserComponent, OrderComponent],// 导出该模块的组件，不导出的话，无法在其他模块使用该模块的组件exports: [UserComponent, OrderComponent],imports: [CommonModule],providers: [CommonService]})export class UserModule { }

10.2 导入自定义模块

在其他模块中导入自定义模块，导入后，自定义模块中暴露（exports）的组件就可以直接使用了

// 引入自定义模块import { UserModule } from './modules/user/user.module'@NgModule({declarations: [],imports: [UserModule // 导入自定义模块],providers: [],bootstrap: [AppComponent]})export class AppModule { }

10.3 通过路由动态加载自定义模块

一. 在自定义模块中创建自己的路由文件，通过命令或者手动创建

ng g module modules/user --routing 会生成一个 user.routing.ts 的文件。user.routing.ts文件中配置路由。配置方式

和根组件中配置一致。也可以配置子路由，配置方式一致。

import { UserComponent } from './user.component'import { AddressComponent } from './components/address/address.component'import { OrderComponent } from './components/order/order.component'const routes: Routes = [{ path: '', component: UserComponent },{ path: 'order', component: OrderComponent },{ path: 'address', component: AddressComponent }];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class UserRoutingModule { }

二. 在user模块中引入 user.routing 。user.module.ts 中导入路由

import { UserRoutingModule } from './user-routing.module'import { UserComponent } from './user.component';import { AddressComponent } from './components/address/address.component';import { OrderComponent } from './components/order/order.component';import { CommonService } from './services/common.service'@NgModule({declarations: [UserComponent, AddressComponent, OrderComponent],// 导出该模块的组件，不导出的话，无法在其他模块使用该模块的组件// exports: [UserComponent, OrderComponent],imports: [CommonModule,UserRoutingModule],providers: [CommonService]})export class UserModule { }

三. 在根组件中引入自定义模块 app.module.ts

// 引入自定义模块import { UserModule } from './modules/user/user.module'@NgModule({imports: [BrowserModule,AppRoutingModule,UserModule],providers: [],bootstrap: [AppComponent]})

四. 在根路由模块中配置 app-routing.ts, 使用 loadChildren : ‘模块路径#模块类名称’

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [{ path: 'user', loadChildren: "./modules/user/user.module#UserModule" },{ path: 'news', loadChildren: "./modules/news/news.module#NewsModule" },{ path: 'product', loadChildren: "./modules/product/product.module#ProductModule" },{ path: '**', redirectTo: 'user' } ];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule { }