README.md · Cauliflower/Angular概念

# 温故知新 -- 重要Angular概念

![](./images/001.png)

![](./images/002.png)

**不能把Angular当作黑盒来使用,要充分了解它的内部结构。**

## 依赖注入

1、 什么是依赖注入？

2、依赖性注入框架

Angular
![](./images/003.png)

在angular中，我们只要记住依赖注入的三种角色：使用者、服务(依赖对象)及注入器(Injector)

- @Injectable是@Component的子类

- 每一个HTML标签上面都会有一个注射器实例

- 注射是通过constructor(构造器)进行的

![](./images/004.jpg)

**注入器(Injectable)和提供器(Provider)**

![](./images/005.png)

3、依赖性注入进阶

**什么时候使用装饰器：@Injectable( )**

当创建服务（service）需要在构造函数中注入依赖对象，就需要使用 Injectable 装饰器。

延伸1：@Injectable() 是必须的么？

如果所创建的服务不依赖于其他对象，是可以不用使用 `Injectable` 类装饰器。但当该服务需要在构造函数中注入依赖对象，就需要使用 Injectable 装饰器。不过比较推荐的做法不管是否有依赖对象，在创建服务时都使用 `Injectable 类装饰器`。

延伸2：注入器的层级关系( 服务之间如何之间注入 )

- 提供器可以声明在模块中，也可以声明在组件中。
- 在angular中只有一种注入，那就是构造器注入。如发现无参构造器，这就说明这个组件没有被注入任何东西。

## ChangeDeteccion

检测程序内部状态，然后反映到UI上

引起状态变化(异步)：

- Events
- XHR
- Times

## 指令

组件是一种特殊的指令（组件是一种带模板的指令）

- 结构型指令  --改变元素的布局
- 属性型指令  --改变外观和行为

> 属性型指令

Renderer 2 和 ElementRef

**Angular 不提倡直接操作DOM**

**对于DOM的操作应该通过Renderer 2来进行**

**ElementRef 可以理解成指向DOM元素的引用**

> 结构型指令

![](./images/006.png)

>样式

**ngClass，ngStyle，[class.yourstyle]**

ngClass： 用于条件动态指定样式类，适合对样式做大量更改的情况

ngStyle： 用于条件动态指定样式，适合少量更改的情况

[class.yourcondition]="condition" : 直接对应一个条件

### 延伸1: `<ng-template>`与 `<ng-container>` 有什么区别？

`<ng-template>` 用于定义模板，使用 `*` 语法糖的结构指令，最终都会转换为 `<ng-template>` 模板指令，模板内的内容如果不进行处理，是不会在页面中显示

`<ng-container>` 是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 `comment` 元素，它可用于避免添加额外的元素来使用结构指令。

**小贴士：**

`ng-container`既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。

```小贴士
这点类似于template，Angular复用了HTML5规范中template 的tag的语义，不过并没有真正利用其实现，因此在审查元素中是永远也找不到一个template元素的。 
不过，由于ng-container并不是HTML5中的，为了保持区分度，采用了ng-作为前缀。所以现在我们可以知道，ng-container是Angular所定义的一个特殊tag。
```
### 延伸2：不要混淆 `ng-container` 与 `ng-content`

`ng-content` 是一个占位符，有些类似于`router-outlet`

**拓展1：**  那为什么要是使用`ng-content`？什么场景使用呢？

答：&nbsp;&nbsp; 父组件包含子组件都是直接指明子组件的`selector`，比如子组件的`selector`叫`app-child`，那么嵌入父组件时直接指明即可:`<app-child></app-child>`

&nbsp;&nbsp; 这是很硬性的编码，而`ng-content`就是用来替代这种硬性编码的。
 
### 延伸3： TemplateRef 与 ViewContainerRef 有什么作用？

### 延伸4： ViewChild和ViewChildren

ViewChild 该装饰器用于获取模板视图中的元素或直接调用其组件中的方法。它支持 Type 类型或 string 类型的选择器，同时支持设置 read 查询条件，以获取不同类型的实例。比如`ElementRef`和`ViewContainerRef`.

ViewChildren 该装饰器是用来从模板视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。

![](./images/007.png)

### 通信

+ 父子组件通信
  + 父子组件通信一般使用@Input和@Output即可实现，参考Angular4学习笔记（六）- Input和Output
  + 通过Subject

+ 非父子组件通信
 + 非父子组件见通信可以通过同一个service来实现。需要注意的是一定要在service中定义一个临时变量来供传递

## 模块

什么是模块？

**declarations:** 模块内部`Components/Directives/Pipes`的列表，声明一下这个模块内部成员(本模块创建的组件，加入到这个元数据中的组件才会被编译)

**imports：** 导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。(引入的外部NG模块)

**exports：** 用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

![](./images/008.png)

**providers：** 指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中）

**bootstrap：** 通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。(声明启动引导哪个组件，必须是编译过的组件)

&nbsp;&nbsp;&nbsp;&nbsp;需要强调的是，`bootstrap`元数据声明的组件必须是编译过的组件：它要么属于 使用`imports`元数据引入的外部NG模块，要么是已经在`declarations`元数据 中声明的本地组件。

**entryCompoenents:** 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

模块的元数据？

经常看到的`forRoot( )`是什么鬼？

## 模板型驱动表单 和 响应式表单

- 模板型驱动表单

**特点**

1、表单的数据绑定(例如ngModel的双向绑定)
2、ngModel的困惑

- 响应式表单

**三个重要元素：**

- FormControl
- FormGroup
- FormBuilder

## 路由

Routes 其实是一个Route类的数组。

![](./images/009.png)

而`Route`的参数如下图所示，一般情况下，`path`和`component`是必选的两个参数。比如：`path:/a`,`component:A`则说明，当地址为`/a`时，应该展示组件`A`的内容。

![](./images/010.png)

**其余类的简介见下图：**

![](./images/011.png)

### 延伸1： 路由参数传递 -- 参数传递的几种方式

+ 普通方式传递数据：`/product?id=1&name=iphone => ActivatedRoute.queryParams[id]`;
+ rest方式传递数据：`{path:/product/:id} => /product/1 => ActivatedRoute.params[id];`
+ 路由配置传递数据：`{path:/product,component:ProductComponent,data:[{madeInChina:true}]} => ActivatedRoute.data[0][madeInChina];`

## 数据绑定、响应式编程和管道、@Input()与@Output()

数据绑定: Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递。

+ 单向绑定： 它的意思是要么是ts文件为html文件赋值，要么相反。

![](./images/012.png)

![](./images/013.png)

+ 双向绑定: ts文件与html文件中绑定的值同时改变。

![](./images/014.png)
#### DOM属性和HTML属性

+ 1、少量 HTML 属性 和 DOM 属性之间有着1:1的映射，如id。(HTML元素属性和DOM属性的名称和值大部分都相同)

+ 2、有些HTML属性没有对应的DOM属性，如 colspan

+ 3、有些DOM属性没有对应的HTML属性，如textContent。有些名字相同，HTML属性和DOM属性的值也不是同一样东西。

+ 4、HTML属性的值指定了初始值；DOM属性的值标识当前值。DOM属性的值可以改变；HTML属性的值不能改变。

+ 5、模板绑定是通过DOM属性和时间来工作的，而不是 HTML 属性。

### DOM属性绑定

![](./images/015.png)

### HTML属性绑定

![](./images/016.png)

**DOM绑定与HTML属性绑定的区别**

| | DOM绑定 | HTML绑定 |
| :------| ------: | :------: |
|相同情况下|	一个元素的id||
|有html属性无dom属性|	|	表格中td的colspan|
|有dom属性无html属性|textContent属性||
|关于值|	dom表示当前值|	html表示初始化值|
|关于可变|	dom值是可变的|	html值是不可变的|

总结:我们模板绑定是通过DOM属性来操作的，不是HTML属性来操作的

### 类绑定

![](./images/017.png)

### 样式绑定

![](./images/018.png)

#### 模板变量

![](./images/019.png)

##### Angular中的输入输出是通过注解`@Input`和`@Output`来标识，它位于组件控制器的属性上方。输入输出针对的对象是父子组件。

## RxJS

## Redux

1、Redux 是什么？

全局的、唯一的、不可变的内存状态[数据库]

![](./images/020.png)

## Angular 整合Redux

#### 导入NgRedux

![](./images/021.png)

#### 构造参数为`store`的构造器

![](./images/022.png)

#### 在你的组件(components)中使用`store`
![](./images/023.png)

#### 注入Actions

![](./images/024.png)

#### Accessing(访问) Services from Actions

![](./images/025.png)

#### Dispatching(调度、派遣) Actions

![](./images/026.png)

## 目前Angular整合Redux两种方式：

+ `Ng-redux` 核心仍使用 Redux，增加對 Angular 的支援

+ `Ngrx` 只有概念使用 Redux，核心完全使用 RxJS 重新操作。

**安裝 Ngrx** ` npm install @ngrx/core @ngrx/store --save`

![](./images/027.png)

![](./images/028.gif)

**View** 相当于`component`，主要在显示使用者界面。

**Action** 当`component` 有任何 `event` 時，会对 `Ngrx` 发出 `action`。

**Middleware** 负责存取对 `server` 端的 API

**Dispatcher** 负责接受 `component` 传来的 action，并将 `action` 传给 `reducer`。

**Store** 可是为 `Ngrx` 在浏览器端的资料库，各 `component` 的资料都可统一放在这里。

**Reducer** 根据`dispatcher` 传来的 `action`，决定该如何写入state。

当 `state` 有改变时，將通知有`subscribe`该`state`的`component`自动更新。

**State** 存放在 `store` 內的资料。

![](./images/029.svg)

有些东西Ngrx 已经帮我们做了，真的要我們自己操作只有 4 個部份，且资料流为单向的 : `Component -> Action -> Reducer -> Store -> Component`。

### 什么时候该使用Ngrx？

+ 当多个 `component` 需使用共用资料，且各 `component` 的操作会影像其他 `component` 的结果。
+ 资料可能同时被多个`component`修改，甚至同時被 `server API `修改。
+ 需要操作undo/redo 功能。

> 案例--操作：

[新版迁移指南 ：https://github.com/ngrx/platform/blob/master/MIGRATION.md](https://github.com/ngrx/platform/blob/master/MIGRATION.md)

**AppModule：app.module.ts**

![](./images/030.png)

**AppComponent ：--> app.component.html、app.component.ts**

![](./images/031.png)

**Action ：--> counter.action.ts**

![](./images/032.png)

**Reducer ：--> counter.reducer.ts**

![](./images/033.png)

**Store ：--> counter.store.ts**

![](./images/034.png)

### Redux 在您的Angular应用使用`reselect`进行状态函数的高阶运算

reselect：带‘记忆’功能的函数运算

无论多少参数，最后一个才是用于函数计算，其他的都是他的输入

```typescript
export const getTasksWithOwner = createSelector(getTasks,getUserEntities,(tasks,entities) ={
   return tasks.map(task =>{
    const owner = entites[task.ownerId];
    const participants =task.participantIds.map(id => entites[id]);
    return Object.assgin({ },task,{owner:owner},{participants:[...participants]});
   });
})
```

## 使用`@ngrx/store`

![](./images/035.png)

**Registering Reducers**

![](./images/036.png)

简化：
![](./images/037.png)

示例：
![](./images/038.png)

## 什么是Effect?

@Effect( ) 标识是一个Observable<Action>流。

![](./images/039.png)
![](./images/040.png)

![](./images/041.png)

**使用effect：`import {Actions, Effect} from '@ngrx/effects';`**

```typescript
@Injectable()
export class AuthEffects{
 // 通过构造注入需要的服务和 action 信号流
 constructor(private actions$: Actions, private authService: AuthService) { }
 
 //用 @Effect() 修饰器来标明这是一个 Effect
 @Effect() 
 login$: Observable<Action> = this.actions$ // action 信号流
 .ofType(authActions.ActionTypes.LOGIN) // 如果是 LOGIN Action
 .map(toPayload) // 转换成 action 的 payload 数据流
 .switchMap((val:{username:string, password: string}) => {
 // 调用服务
 return this.authService
 .login(val.username, val.password)
 // 如果成功发出 LOGIN_SUCCESS Action 交给其它 Effect 或者 Reducer 去处理
 .map(user => new authActions.LoginSuccessAction({user: user}))
 // 如果失败发出 LOGIN_FAIL Action 交给其它 Effect 或者 Reducer 去处理
 .catch(err => of(new actions.LoginFailAction(err)));
 });

}
```

顺序安装依赖库
```typescript
$ npm i --save @ngrx/core
$ npm i --save @ngrx/store
$ npm i --save @ngrx/effects

/**
 * 我们使用reselect来实现高效的`state`存取操作。我们将使用`reselect`的
 * `createSelector`方法来创建高效的选择器，这个选择器能被存储且仅在参
 * 数更改的时候才会重构
 */
$ npm i --save reselect
 
 /**
  * 为了让开发更加方便并易于调试，我们添加能够在控制台记
  * 录action和state的更新的store-logger来帮助我们
  */
$ npm i --save ngrx-store-logger 
```

示例：
![](./images/042.png)

## 使用`@ngrx/router-store`

![](./images/043.png)

### Navigation actions

![](./images/044.png)

示例：
![](./images/045.png)

## 使用`@ngrx/store-devtools`
注册到模块中
```typescript
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment'; // Angular CLI environment

@NgModule({
  imports: [
    !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : []
  ]
})
export class AppModule {}
```

## 常出现的异常解决方案

1、多次声明同一个组件

组件是 Angular 应用程序中的常见构建块。每个组件都需要在 `@NgModule.declarations` 数组中声明，才能够使用。在 Angular 中是不允许在多个模块中声明同一个组件，如果一个组件在多个模块中声明的话，那么 Angular 编译器将会抛出异常。

> 场景使用 -- 在多个模块中使用同一个组件是允许的

+ 如果一个模块作为另一个模块的子模块，那么针对上面的场景解决方案将是：
 + 在子模块的 @NgModule.declaration 中声 HeroComponent 组件
 + 通过子模块的 @NgModule.exports 数组中导出该组件
 + 在父模块的 @NgModule.imports 数组中导入子模块

+ 对于其它情况，我们可以创建一个新的模块(共享模块)，如 SharedModule 模块。具体步骤如下：
 + 在 SharedModule 中声明和导出 HeroComponent
 + 在需要使用 HeroComponent 的模块中导入 SharedModule

2、angular: Error: Uncaught (in promise): Error: StaticInjectorError...

原因：构建的service没有添加到module里造成的 或者 service module没有在app 的module下引入。

3、core.js:1350 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[Http]: StaticInjectorError[Http]: NullInjectorError: No provider for Http!

将HttpMoudle导入到我的app.module.ts中，问题就没有了

```
import { HttpModule } from '@angular/http';
```

Cauliflower/Angular概念

简介

发行版

贡献者

近期动态

Cauliflower/Angular概念 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Cauliflower/Angular概念