Angular新手入门指南【最全】

国足虐我千百次 發表於 2022-12-7 18:31:00

<h2>Angular概述</h2>
Angular 是谷歌开发的一款开源的 web 前端框架，基于 TypeScript 。
和 react 与 vue 相比， Angular 更适合中大型企业级项目。
<h3>Angular程序架构</h3>
<img src="https://img.php.cn/upload/article/000/000/024/6157a13ebf7a44ebb42b81812e0528d3-0.png">
<h3>Angular优势</h3>
<ul>
<li>可伸缩性：基于RxJS 、immutable.js和其他推送模型，能适应海量数据需求</li>
<li>跨平台：渐进式应用（高性能、离线使用、免安装），原生（Ionic），桌面端</li>
<li>生产率：模版（通过简单而强大的模版语法，快速创建UI视图），CLI（快速进入构建环节、添加组件和测试，然后立即部署）</li>
<li>测试：单元测试（支持Karma、Jasmine等工具进行单元测试），端到端测试（支持Protractor等工具进行端到端测试）【相关教程推荐：《angular教程》】</li>
</ul>
<h3>@angular/cli脚手架</h3>
ng new 新建项目
<ul>
<li>——routing 配置路由</li>
<li>——style=css|scss|less 配置css样式</li>
</ul>
ng serve 启动项目
<ul>
<li>——port 4200 端口号，默认4200</li>
<li>——open 自动打开浏览器</li>
</ul>
ng build 打包项目
<ul>
<li>——aot 预编译</li>
<li>——prod 压缩打包</li>
<li>——base-href=/static/</li>
</ul>
ng generate 创建模块/组件/服务
<ul>
<li>module ——routing 创建模块</li>
<li>component 创建组件</li>
<li>service / 创建服务</li>
</ul>
<h3>文件加载顺序</h3>
<blockquote>
main.ts => app.module.ts => app.component.ts => index.html => app.component.html
</blockquote>
<h3>项目目录结构</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">|-- project
|-- .editorconfig // 用于在不同编辑器中统一代码风格
|-- .gitignore // git中的忽略文件列表
|-- README.md // markdown格式的说明文件
|-- angular.json // angular的配置文件
|-- browserslist // 用于配置浏览器兼容性的文件
|-- karma.conf.js // 自动化测试框架Karma的配置文件
|-- package-lock.json // 依赖包版本锁定文件
|-- package.json // npm的包定义文件
|-- tsconfig.app.json // 用于app项目的ts配置文件
|-- tsconfig.json // 整个工作区的ts配置文件
|-- tsconfig.spec.json // 用于测试的ts配置文件
|-- tslint.json // ts的代码静态扫描配置
|-- e2e // 自动化集成测试目录
|-- src // 源代码目录

|-- src // 源代码目录
|-- favicon.ico // 收藏图标
|-- index.html // 单页应用到宿主HTML
|-- main.ts // 入口 ts 文件
|-- polyfills.ts // 用于不同浏览器的兼容脚本加载
|-- styles.css // 整个项目的全局css
|-- test.ts // 测试入口
|-- app // 工程源码目录
|-- assets // 资源目录
|-- environments // 环境配置
|-- environments.prod.ts // 生产环境
|-- environments.ts // 开发环境</pre>
</div>
<h2>Angular模块</h2>
在 app.module.ts 中定义 AppModule，这个根模块会告诉 Angular 如何组装应用。
<img src="https://img.php.cn/upload/article/000/000/024/a085f0538ff33d0bd5aae50bdbeeeef2-1.png">
<h3>@NgModule 装饰器</h3>
@NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用
设计意图
<ul>
<li>静态的元数据（declarations）</li>
<li>运行时的元数据（providers）</li>
<li>组合与分组（imports 和 exports）</li>
</ul>
元数据
<ul>
<li>declarations 数组：模块拥有的组件、指令或管道，注意每个组件/指令/管道只能在一个模块中声明</li>
<li>providers 数组：模块中需要使用的服务</li>
<li>imports 数组：导入本模块需要的依赖模块，注意是模块</li>
<li>exports 数组：暴露给其他模块使用的组件、指令或管道等</li>
<li>bootstrap 数组：指定应用的主视图（称为根组件）通过引导根 AppModule 来启动应用，即项目刚加载时选择读哪个组件</li>
<li>entryComponents 数组：一般用于动态组件</li>
</ul>
<h3>内置模块</h3>
常用的有：核心模块、通用模块、表单模块、网络模块等
<img src="https://img.php.cn/upload/article/000/000/024/acd6a53d6b1a5e051dd43726899638bb-2.png">
<h3>自定义模块</h3>
当项目比较小的时候可以不用自定义模块
但是当项目非常庞大的时候，把所有的组件都挂载到根模块里面就不太合适了
所以可以使用自定义模块来组织项目，并且通过自定义模块可以实现路由的懒加载
<h3>模块的tips</h3>
导入其他模块时，需要知道使用该模块的目的
<ul>
<li>如果是组件，那么需要在每一个需要的模块中都进行导入</li>
<li>如果是服务，那么一般来说在根模块导入一次即可</li>
</ul>
需要在每个需要的模块中进行导入的
<ul>
<li><code>CommonModule</code> : 提供绑定、*ngIf 和 *ngFor 等基础指令，基本上每个模块都需要导入它</li>
<li><code>FormsModule / ReactiveFormsModule</code> : 表单模块需要在每个需要的模块导入</li>
<li>提供组件、指令或管道的模块</li>
</ul>
只在根模块导入一次的
<ul>
<li><code>HttpClientModule / BrowerAnimationsModule NoopAnimationsModule</code></li>
<li>只提供服务的模块</li>
</ul>
<h2>Angular组件</h2>
<img src="https://img.php.cn/upload/article/000/000/024/c9285356a883dd08ee52c03fa66164b3-3.png">
<ul>
<li>组件是 Angular 的核心，是 Angular 应用中最基本的 UI 构造块，控制屏幕上被称为视图的一小片区域</li>
<li>组件必须从属于某个 <code>NgModule</code> 才能被其他组件或应用使用</li>
<li>组件在 <code>@NgModule</code> 元数据的 <code>declarations</code> 字段中引用</li>
</ul>
<h3>@Component 元数据</h3>
<ul>
<li>selector ：选择器，选择相匹配的HTML里的指令模版</li>
<li>templateUrl ：将选择器中匹配的指令同级替换成值的模版</li>
<li>template ：内嵌模版，直接可以在里面写HTML模版</li>
<li>styleUrls ：对应模版的样式，为一个数组，可以引入多个css样式控制组件</li>
<li>encapsulation：组件样式封装策略</li>
</ul>
<div class="cnblogs_code">
<pre>@Component({
selector: 'app-xxx',
templateUrl: 'XXX',
styleUrls: ['XXX'],
encapsulation:ViewEncapsulation.Emulated// 不写则默认该值，表示该组件样式只作用于组件本身，不影响全局样式，在 head 中生成单独的 style 标签
})</pre>
</div>
<h3>数据绑定</h3>
<ul>
<li>
数据绑定 <code>{{data}}</code>
</li>
<li>
属性绑定 <code>="id"</code>，其中<code>=“判断表达式”</code>是在应用单个<code>class</code>样式时的常用技巧
</li>
<li>
事件绑定 <code>(keyup)="keyUpFn($event)"</code>
</li>
<li>
样式绑定可以用 <code>:host</code> 这样一个伪类选择器，绑定的样式作用于组件本身
</li>
<li>
双向数据绑定 <code>[(ngModel)]</code>
<div class="cnblogs_code">
<pre>// 注意引入：FormsModule
import { FormsModule } from '@angular/forms';

<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

// 其实是一个语法糖
="username" (ngModelChange)="username = $event"</pre>
</div>
 
</li>
</ul>
<h3>脏值检测</h3>
脏值检测：当数据改变时更新视图（DOM）
如何进行检测：检测两个状态值（当前状态和新状态）
何时触发脏值检测：浏览器事件（<code>click</code>、<code>mouseover</code>、<code>keyup</code>等）、<code>setTimeout()</code>或<code>setInterval()</code>、HTTP请求
Angular 有两种变更检测策略：<code>Default</code> 和 <code>OnPush</code>
可以通过在<code>@Component</code>元数据中设置<code>changeDetection: ChangeDetectionStrategy.OnPush</code>进行切换
<code>Default</code>：
优点：每一次有异步事件发生，Angular 都会触发变更检测，从根组件开始遍历其子组件，对每一个组件都进行变更检测，对dom进行更新。
缺点：有很多组件状态没有发生变化，无需进行变更检测。如果应用程序中组件越多，性能问题会越来越明显。
<code>OnPush</code>：
优点：组件的变更检测完全依赖于组件的输入(<code>@Input</code>)，只要输入值不变就不会触发变更检测，也不会对其子组件进行变更检测，在组件很多的时候会有明显的性能提升。
缺点：必须保证输入(<code>@Input</code>)是不可变的(可以用<code>Immutable.js</code>解决)，每一次输入变化都必须是新的引用。
<h3>父子组件通讯</h3>
<img src="https://img.php.cn/upload/article/000/000/024/6d0f15a4f39080847d564462dbd64019-4.png">
父组件给子组件传值 @input
父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件。
<div class="cnblogs_code">
<pre>// 父组件调用子组件的时候传入数据
<app-header ="msg"></app-header>

// 子组件引入 Input 模块
import { Component, OnInit ,Input } from '@angular/core';

// 子组件中 @Input 装饰器接收父组件传过来的数据
export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() { }
}

// 子组件中使用父组件的数据
<h2>这是头部组件--{{msg}}</h2></pre>
</div>
 
**子组件触发父组件的方法 @Output **
<div class="cnblogs_code">
<pre>// 子组件引入 Output 和 EventEmitter
import { Component,OnInit,Input,Output,EventEmitter} from '@angular/core';

// 子组件中实例化 EventEmitter
// 用 EventEmitter 和 @Output 装饰器配合使用 <string> 指定类型变量
@Output() private outer=new EventEmitter<string>();

// 子组件通过 EventEmitter 对象 outer 实例广播数据
sendParent(){
this.outer.emit('msg from child')
}

// 父组件调用子组件的时候，定义接收事件，outer 就是子组件的 EventEmitter 对象 outer
<app-header (outer)="runParent($event)"></app-header>

// 父组件接收到数据会调用自己的 runParent, 这个时候就能拿到子组件的数据
// 接收子组件传递过来的数据
runParent(msg:string){
alert(msg);
}</pre>
</div>
 
父组件通过 ViewChild 主动调用子组件DOM和方法
<div class="cnblogs_code">
<pre>// 给子组件定义一个名称
<app-footer #footerChild></app-footer>

// 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';

// ViewChild 和子组件关联起来
@ViewChild('footerChild') footer;

// 调用子组件
run(){
this.footer.footerRun();
}</pre>
</div>
 
<h3>投影组件</h3>
<img src="https://img.php.cn/upload/article/000/000/024/c50f52d15d08b5fe75de151cadf784df-5.png">
<blockquote>
由于组件过度嵌套会导致数据冗余和事件传递，因此引入投影组件的概念
</blockquote>
投影组件 <code>ng-content</code> 作为一个容器组件使用
主要用于组件动态内容的渲染，而这些内容没有复杂的业务逻辑，也不需要重用，只是一小部分 HTML 片段
使用 <code>ng-content</code> 指令将父组件模板中的任意片段投影到它的子组件上
组件里面的 <code>ng-content</code> 部分可以被组件外部包裹的元素替代
<div class="cnblogs_code">
<pre>// 表现形式： <ng-content select="样式类/HTML标签/指令"></ng-content>

<ng-content select=""></ng-content></pre>
</div>
<code>select</code> 表明包含 <code>appGridItem</code> 的指令的元素才能投影穿透过来
<h2>Angular指令</h2>
<img src="https://img.php.cn/upload/article/000/000/024/c50f52d15d08b5fe75de151cadf784df-6.png">
<blockquote>
指令可以理解为没有模版的组件，它需要一个宿主元素(Host)
推荐使用方括号 [] 指定 Selector，使它变成一个属性
<div class="cnblogs_code">
<pre>@Directive({
selector: ''
})</pre>
</div>
</blockquote>
<h3>内置属性型指令</h3>
NgClass
<code>ngClass</code> 是自由度和拓展性最强的样式绑定方式
<div class="cnblogs_code">
<pre><div ="{'red': true, 'blue': false}">
这是一个 div
</div></pre>
</div>
NgStyle
<code>ngStyle</code>由于是嵌入式样式，因此可能会覆盖掉其他样式，需谨慎
<div class="cnblogs_code">
<pre><div ="{'background-color':'green'}">你好 ngStyle</div></pre>
</div>
NgModel
<div class="cnblogs_code">
<pre>// 注意引入：FormsModule
import { FormsModule } from '@angular/forms';

<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}</pre>
</div>
<h3>内置结构型指令</h3>
ngIf
ngIf 根据表达式是否成立，决定是否展示 DOM 标签
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> 3">这是 ngIF 判断是否显示</pre>
</div>
ngIf else
<div class="cnblogs_code">
<pre><div *ngIf="show else ElseContent">这是 ngIF 内容</div>
<ng-template #ElseContent>
<h2>这是 else 内容</h2>
</ng-template>

// 结构性指令都依赖于 ng-template，*ngIf 实际上就是 ng-template 指令的属性。</pre>
</div>
ngFor
<div class="cnblogs_code">
<pre><ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul></pre>
</div>
ngSwitch
<div class="cnblogs_code">
<pre><ul ="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">已确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>已失效</li>
</ul></pre>
</div>
<h3>指令事件样式绑定</h3>
<code>@HostBinding</code> 绑定宿主的属性或者样式
<div class="cnblogs_code">
<pre>@HostBinding('style.display') display = "grid";

// 用样式绑定代替rd2的 this.setStyle('display','grid');</pre>
</div>
<code>@HostListener</code> 绑定宿主的事件
<div class="cnblogs_code">
<pre>@HostListener('click',['$event.target'])

// 第一个参数是事件名，第二个是事件携带参数</pre>
</div>
<h2>Angular生命周期</h2>
生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法
当 Angular 使用构造函数新建一个组件或指令后，就会按下面规定的顺序在特定时刻调用生命周期钩子
<blockquote>
<ul>
<li>
constructor ：构造函数永远首先被调用，一般用于变量初始化以及类实例化
</li>
<li>
ngOnChanges ：被绑定的输入属性变化时被调用，首次调用一定在 ngOnInit 之前。输入属性发生变化是触发，但组件内部改变输入属性是不会触发的。注意：如果组件没有输入，或者使用它时没有提供任何输入，那么框架就不会调用 ngOnChanges
</li>
<li>
ngOnInit ：组件初始化时被调用，在第一轮 ngOnChanges 完成之后调用，只调用一次。使用 ngOnInit 可以在构造函数之后马上执行复杂的初始化逻辑，同时在 Angular 设置完输入属性之后，可以很安全的对该组件进行构建
</li>
<li>
ngDoCheck ：脏值检测时调用，在变更检测周期中 ngOnChanges 和 ngOnInit 之后
<ul>
<li>
ngAfterContentInit ：内容投影ng-content完成时调用，只在第一次 ngDoCheck 之后调用
</li>
<li>
ngAfterContentChecked：每次完成被投影组件内容的变更检测之后调用（多次）
</li>
<li>
ngAfterViewInit ：组件视图及子视图初始化完成时调用，只在第一次 ngAfterContentChecked 调用一次
</li>
<li>
ngAfterViewChecked：检测组件视图及子视图变化之后调用（多次）
</li>
</ul>
</li>
<li>
ngOnDestroy 当组件销毁时调用，可以反订阅可观察对象和分离事件处理器，以防内存泄漏
</li>
</ul>
</blockquote>
<h2>Angular路由</h2>
<blockquote>
路由（导航）本质上是切换视图的一种机制，路由的导航URL并不真实存在
Angular 的路由借鉴了浏览器URL变化导致页面切换的机制
Angular 是单页程序，路由显示的路径不过是一种保存路由状态的机制，这个路径在 web 服务器上不存在
</blockquote>
<h3>路由基本配置</h3>
<div class="cnblogs_code">
<pre>/**
* 在功能模块中定义子路由后，只要导入该模块，等同于在根路由中直接定义
* 也就是说在 AppModule 中导入 HomeModule 的时候，
* 由于 HomeModule 中导入了 HomeRouting Module
* 在 HomeRoutingModule 中定义的路由会合并到根路由表
* 相当于直接在根模块中定义下面的数组。
* const routes = [{
* path: 'home',
* component: HomeContainerComponent
* }]
*/

const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},// 配置动态路由
{
path: '',
redirectTo: '/home',// 重定向
pathMatch: 'full'
},
//匹配不到路由的时候加载的组件或者跳转的路由
{
path: '**', /*任意的路由*/
// component:HomeComponent
redirectTo:'home'
}
]

@NgModule({
/**
* 根路由使用 `RouterModule.forRoot(routes)` 形式。
* 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。
* 启用路由的 debug 跟踪模式，需要在根模块中设置 `enableTracing: true`
*/
imports: ,
exports:
})
export class AppRoutingModule { }</pre>
</div>
<h3>激活路由</h3>
找到 <code>app.component.html</code> 根组件模板，配置 <code>router-outlet</code>
通过模版属性访问路由，即路由链接 <code>routerLink</code>
<div class="cnblogs_code">
<pre><h1>
<a ="['/home']">首页</a>
<a ="['/home',tab.link]">首页</a>
<a ="['/home',tab.link,{name:'val1'}]">首页</a> 
<a ="['/home']" ="{name:'val1'}">首页</a> 
</h1>
<router-outlet></router-outlet>

</pre>
</div>
控制路由激活状态的样式 <code>routerLinkActive</code>
<div class="cnblogs_code">
<pre><h1>
<a routerLink="/home" routerLinkActive="active">首页</a>
<a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>

<h1>
<a ="[ '/home' ]" routerLinkActive="active">首页</a>
<a ="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

.active{
color:red;
}</pre>
</div>
<h3>路由参数</h3>
路径参数读取
<div class="cnblogs_code">
<pre>this.route.paramsMap.subscribe(params => {...})</pre>
</div>
查询参数读取
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">this.route.queryParamsMap.subscribe(params => {...})</pre>
</div>
路由传递一个参数及其接收方法：
传递参数：<code>path:’info/:id’</code>
接收参数：
<div class="cnblogs_code">
<pre>constructor(private routerInfo: ActivatedRoute){}
ngOnInit(){
this.routerInfo.snapshot.params['id']
}</pre>
</div>
路由传递多个参数及其接收方法：
传递：<code>=‘{id:1,name:‘crm’}’</code>
接收参数：
<div class="cnblogs_code">
<pre>constructor(private routerInfo: ActivatedRoute){}
ngOnInit(){
this.routerInfo.snapshot.params['id']
this.routerInfo.snapshot.params['name']
}</pre>
</div>
<h3>路由懒加载</h3>
懒加载子模块，子模块需要配置路由设置启动子模块 <code>loadChildren</code>
<div class="cnblogs_code">
<pre>const routes: Routes = [
{path:'user',loadChildren:'./module/user/user.module#UserModule' },
{path:'product',loadChildren:'./module/product/product.module#ProductModule'},
{path:'article',loadChildren:'./module/article/article.module#ArticleModule'},
{path:'**',redirectTo:'user'}
];

// 上面好像会报错 Error find module 
// 配置懒加载
const routes: Routes = [
{path:'user',loadChildren:()=>import('./module/user/user.module').then(mod=>mod.UserModule)},
{path:'article',loadChildren:()=>import('./module/article/article.module').then(mod=>mod.ArticleModule)},
{path:'product',loadChildren:()=>import('./module/product/product.module').then(mod=>mod.ProductModule)},
{path:'**',redirectTo:'user'}
];</pre>
</div>
<h2>Angular服务</h2>
组件不应该直接获取或保存数据，应该聚焦于展示数据，而把数据访问的职责委托给某个服务
获取数据和视图展示应该相分离，获取数据的方法应该放在服务中
类似 VueX，全局的共享数据（通用数据）及非父子组件传值、共享数据放在服务中
组件之间相互调用各组件里定义的方法
多个组件都用的方法（例如数据缓存的方法）放在服务（service）里
<div class="cnblogs_code">
<pre>import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class HeroService {
aa = 'abc';
constructor(){ }
ngOnInit(){ }
}

import { HeroService } from '../../../services/hero/hero.service';
export class AComponent implements OnInit{
constructor(private heroService : HeroService) {} //实例化
ngOnInit(){
console.log(this.heroService.aa)
}
}</pre>
</div>
<h3>@Injectable()装饰器</h3>
在 Angular 中，要把一个类定义为服务，就要用 <code>@Injectable()</code> 装饰器来提供元数据，以便让 Angular 把它作为依赖注入到组件中。
同样，也要使用 <code>@Injectable ()</code> 装饰器来表明一个组件或其它类（比如另一个服务、管道或 <code>NgModule</code>）拥有一个依赖。
<code>@Injectable ()</code> 装饰器把这个服务类标记为依赖注入系统的参与者之一，它是每个 Angular 服务定义中的基本要素。
在未配置好 Angular 的依赖注入器时，Angular 实际上无法将它注入到任何位置。
<code>@Injectable ()</code> 装饰器具有一个名叫 <code>providedIn</code> 的元数据选项，<code>providedIn</code> 设置为 <code>'root'</code>，即根组件中，那么该服务就可以在整个应用程序中使用了。
<code>providedIn</code> 提供这些值：<code>‘root'</code> 、<code>'platform'</code> 、<code>'any'</code> 、<code>null</code>
对于要用到的任何服务，必须至少注册一个提供者。
服务可以在自己的元数据中把自己注册为提供者，可以让自己随处可用，也可以为特定的模块或组件注册提供者。
要注册提供者，就要在服务的 <code>@Injectable ()</code> 装饰器中提供它的元数据，或者在 <code>@NgModule ()</code> 或 <code>@Component ()</code> 的元数据中。
在组件中提供服务时，还可以使用 <code>viewProdivers</code>，<code>viewProviders</code> 对子组件树不可见
<blockquote>
可以使用不同层级的提供者来配置注入器，也表示该服务的作用范围
<ul>
<li>
Angular 创建服务默认采用的方式：在服务本身的 @Injectable () 装饰器中
</li>
<li>
该服务只在某服务中使用：在 NgModule 的 @NgModule () 装饰器中
</li>
<li>
该服务在某组件中使用：在组件的 @Component () 装饰器中
</li>
</ul>
</blockquote>
<h3>依赖注入</h3>
在项目中，有人提供服务，有人消耗服务，而依赖注入的机制提供了中间的接口，并替消费者创建并初始化处理
消费者只需要知道拿到的是完整可用的服务就好，至于这个服务内部的实现，甚至是它又依赖了怎样的其他服务，都不需要关注。
Angular 通过 <code>service</code>共享状态，而这些管理状态和数据的服务便是通过依赖注入的方式进行处理的
Angular 的 <code>service</code> 的本质就是依赖注入，将<code>service</code>作为一个<code>Injector</code>注入到<code>component</code>中
归根到底，很多时候我们创建服务，是为了维护公用的状态和数据，通过依赖注入的方式来规定哪些组件可共享
<img src="https://img.php.cn/upload/article/000/000/024/1e444f9305fcc21dfaaa4a519663e69b-7.png">
正是因为 Angular 提供的这种依赖注入机制，才能在构造函数中直接声明实例化
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">constructor(private heroService : HeroService) {} // 依赖注入</pre>
</div>
<img src="https://img.php.cn/upload/article/000/000/024/98011c1b63c29d8f79032bf5936ea93d-8.png">
先看一下 Angular 中 TS 单文件的注入
<div class="cnblogs_code">
<pre>// 首先写 @injectable 我们需要注入的东西，比如说 product
@Injectable()
class Product {
constructor(
private name: string,
private color: string,
private price: number,
) { }
}

class PurchaseOrder {
constructor(private product: Product){ }
}

export class HomeGrandComponent implements OnInit {
constructor() { }
ngOnInit() {
// 构造一个 injector 用 create 方法里面 providers 数组中写我们需要构造的东西
const injector = Injector.create({
 providers: [
 {
 provide: Product,
 // 构造 Product 在 useFactory 中就会把上面定义的 product 注入到这里
 useFactory: () => {
 return new Product('大米手机', '黑色', 2999);
 },
 deps: []
 },
 {
 provide: PurchaseOrder,
 deps:
 },
 {
 provide: token,
 useValue: { baseUrl: 'http://local.dev' }
 }
 ]
});
console.log('injector获取product', injector.get(PurchaseOrder).getProduct);
console.log(injector.get(token));
}</pre>
</div>
再看一下Angular 中 module 模块的注入
<div class="cnblogs_code">
<pre>// .service.ts 中 @Injectable () 依赖注入
@Injectable()
export class HomeService {
imageSliders: ImageSlider[] = [
{
 imgUrl:'',
 link: '',
 caption: ''
}
]
getBanners() {
return this.imageSliders;
}
}

// 使用模块对应的.module.ts 中
@NgModule({
declarations: [
HomeDetailComponent,
],
providers:, // 在 providers 直接写对应服务，直接将服务注入模块
imports:
})</pre>
</div>
<blockquote>
不管是在组件内还是在模块内，我们使用 <code>providers</code> 的时候，就是进行了一次依赖注入的注册和初始化
其实模块类（<code>NgModule</code>）也和组件一样，在依赖注入中是一个注入器，作为容器提供依赖注入的接口
<code>NgModule</code> 使我们不需要在一个组件中注入另一个组件，通过模块类（<code>NgModule</code>）可以进行获取和共享
</blockquote>
<h2>Angular 管道</h2>
<code>Angular</code> 管道是编写可以在 HTML 组件中声明的显示值转换的方法
管道将数据作为输入并将其转换为所需的输出
管道其实就是过滤器，用来转换数据然后显示给用户
管道将整数、字符串、数组和日期作为输入，用 <code>|</code> 分隔，然后根据需要转换格式，并在浏览器中显示出来
在插值表达式中，可以定义管道并根据情况使用
在 <code>Angular</code> 应用程序中可以使用许多类型的管道
<h3>内置管道</h3>
<ul>
<li><code>String</code> -> <code>String</code>  
<ul>
<li>UpperCasePipe 转换成大写字符</li>
<li>LowerCasePipe 转换成小写字符</li>
<li>TitleCasePipe 转换成标题形式，第一个字母大写，其余小写</li>
</ul>
</li>
<li><code>Number</code> -> <code>String</code>  
<ul>
<li>DecimalPipe 根据数字选项和区域设置规则格式化值</li>
<li>PercentPipe 将数字转换为百分比字符串</li>
<li>CurrencyPipe 改变人名币格式</li>
</ul>
</li>
<li><code>Object</code> -> <code>String</code>  
<ul>
<li>JsonPipe 对象序列化</li>
<li>DatePipe 日期格式转换</li>
</ul>
</li>
<li><code>Tools</code>  
<ul>
<li>SlicePipe 字符串截取</li>
<li>AsyncPipe 从异步回执中解出一个值</li>
<li>I18nPluralPipe 复数化</li>
<li>I18nSelectPipe 显示与当前值匹配的字符串</li>
</ul>
</li>
</ul>
使用方法
<div class="cnblogs_code">
<pre><div>{{ 'Angular' | uppercase }}</div>

<div>{{ data | date:'yyyy-MM-dd' }}</div>

<div>{{ { name: 'ccc' } | json }}</div>




<div>{{ 'ccc' | slice:0:1 | uppercase }}</div></pre>
</div>
<h3>自定义管道</h3>
管道本质上就是个类，在这个类里面去实现 <code>PipeTransfrom</code> 接口的 <code>transform</code> 这个方法
<ul>
<li>使用 <code>@Pipe</code> 装饰器定义 <code>Pipe</code> 的 <code>metadata</code> 信息，如 <code>Pipe</code> 的名称 - 即 <code>name</code> 属性</li>
<li>实现 <code>PipeTransform</code> 接口中定义的 <code>transform</code> 方法</li>
</ul>
<div class="cnblogs_code">
<pre>// 引入PipeTransform是为了继承transform方法
import { Pipe, PipeTransform } form '@angular/core';
// name属性值惯用小驼峰写法, name的值为html中 | 后面的名称
@Pipe({ name: 'sexReform' })
export class SexReformPipe implements PipeTransform {
transform(value: string, args?: any): string {
// value的值为html中 | 前面传入的值， args为名称后传入的参数
 switch(value){
 case 'male': return '男';
 case 'female': return '女';
 default: return '雌雄同体';
 }
}
}

// demo.component.ts
export Class DemoComponent {
sexValue = 'female';
}

// demo.component.html
{{ sexValue | sexReform }}

// 浏览器输出
女

// 管道可以链式使用，还可以传参
 {{date | date: 'fullDate' | uppercase}} 
// 每一个自定义管道都需要实现 PipeTransform 接口，这个接口非常简单，只需要实现 transform 方法即可。
// transform()方法参数格式 - transform(value: string, args1: any, args2?: any): 
// value为传入的值（即为需要用此管道处理的值， | 前面的值）; 
// args 为传入的参数(?:代表可选)；
// html 中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}
// 与 component 一样,pipe 需要先在 declarations 数组中声明后使用</pre>
</div>
<h2>Angular操作DOM</h2>
<h3>原生JS操作</h3>
<div class="cnblogs_code">
<pre>ngAfterViewInit(){
var boxDom:any=document.getElementById('box');
boxDom.style.color='red';
}</pre>
</div>
<h3>ElementRef</h3>
<code>ElementRef </code>是对视图中某个原生元素的包装类
因为 DOM 元素不是 Angular 中的类，所以需要一个包装类以便在 Angular 中使用和标识其类型
<code>ElementRef</code> 的背后是一个可渲染的具体元素。在浏览器中，它通常是一个 DOM 元素
<div class="cnblogs_code">
<pre>class ElementRef<T> {
constructor(nativeElement: T)
nativeElement: T//背后的原生元素，如果不支持直接访问原生元素，则为 null（比如：在 Web Worker 环境下运行此应用的时候）。
}</pre>
</div>
当需要直接访问 DOM 时，请把本 API 作为最后选择。优先使用 Angular 提供的模板和数据绑定机制
如果依赖直接访问 DOM 的方式，就可能在应用和渲染层之间产生紧耦合。这将导致无法分开两者，也就无法将应用发布到 Web Worker 中
<h3>ViewChild</h3>
使用模板和数据绑定机制，使用 <code>@viewChild</code>
<div class="cnblogs_code">
<pre>// 模版中给 DOM 起一个引用名字，以便可以在组件类或模版中进行引用 <div #myattr></div>

// 引入 ViewChild
import { ViewChild,ElementRef } from '@angular/core';

// 用 ViewChild 绑定 DOM 
@ViewChild('myattr') myattr: ElementRef;

// 在 ngAfterViewInit 生命周期函数里可以很安全的获取 ViewChild 引用的 DOM
ngAfterViewInit(){
let attrEl = this.myattr.nativeElement;
}</pre>
</div>
父组件中可以通过 <code>ViewChild</code> 调用子组件的方法
<div class="cnblogs_code">
<pre>// 给子组件定义一个名称
<app-footer #footerChild></app-footer>

// 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';

// ViewChild 和子组件关联起来 
// 如果想引用模版中的 Angular 组件，ViewChild 中可以使用引用名，也可以使用组件类型
@ViewChild('footerChild') footer;

// @ViewChild('imageSlider', { static: true }) // static指定是动态还是静态，在*ngFor或者*ngIf中是动态，否则即为静态，动态为 true

// 调用子组件
run(){
this.footer.footerRun();
}</pre>
</div>
引用多个模版元素，可以用<code>@ViewChildren</code>，在<code>ViewChildren</code>中可以使用引用名
或者使用 Angular 组件/指令的类型，声明类型为 <code>QueryList<?></code>
<div class="cnblogs_code">
<pre><img
#img
*ngFor="let slider of sliders"
="slider.imgUrl"
="slider.capiton"
>

// 使用 ViewChildren 引用获取
@ViewChildren（’img‘）;

// 使用类型引用获取
imgs: QueryList<ElementRef>;</pre>
</div>
<h3>Renderer2</h3>
<code>Renderer2</code> 是 Angular 提供的操作 <code>element</code> 的抽象类，使用该类提供的方法，能够实现在不直接接触 DOM 的情况下操作页面上的元素。
<code>Renderer2</code> 的常用方法：
<ul>
<li><code>addClass</code> /<code>removeClass</code> 在 <code>directive</code> 的宿主元素添加或删除 <code>class</code></li>
</ul>
<div class="cnblogs_code">
<pre>import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
selector: ''
})

export class TestRenderer2Directive implements OnInit {
constructor(private renderer: Renderer2, private el: ElementRef) {} // 实例化

ngOnInit() {
this.renderer.addClass(this.el.nativeElement, 'test-renderer2');
// this.renderer.removeClass(this.el.nativeElement, 'old-class');
 }
}</pre>
</div>
<ul>
<li><code>createElement</code> /<code>appendChild</code>/<code>createText</code> 创建 DIV 元素，插入文本内容，并将其挂载到宿主元素上</li>
</ul>
<div class="cnblogs_code">
<pre>import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
const div = this.renderer.createElement('div');
const text = this.renderer.createText('Hello world!');

this.renderer.appendChild(div, text);
this.renderer.appendChild(this.el.nativeElement, div);
}</pre>
</div>
<ul>
<li><code>setAttribute</code> /<code>removeAttribute</code> 在宿主元素上添加或删除 <code>attribute</code></li>
</ul>
<div class="cnblogs_code">
<pre>import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}</pre>
</div>
<ul>
<li><code>setStyle</code> /<code>removeStyle</code> 在宿主元素上添加 <code>inline-style</code></li>
</ul>
<div class="cnblogs_code">
<pre>import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
this.renderer.setStyle(
 this.el.nativeElement,
 'border-left',
 '2px dashed olive'
);
}</pre>
</div>
移除 <code>inline-style</code> :
<div class="cnblogs_code">
<pre>constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}</pre>
</div>
<ul>
<li><code>setProperty</code> 设置宿主元素的 <code>property</code> 的值</li>
</ul>
<div class="cnblogs_code">
<pre>constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}</pre>
</div>
<blockquote>
直接操作DOM，<code>Angular</code>不推荐。尽量采用 <code>@viewChild</code> 和 <code>renderer2</code> 组合，<code>Angular</code>推荐使用 <code>constructor(private rd2: Renderer2) {}</code> 依赖注入，
</blockquote>
<div class="cnblogs_code">
<pre>import {
Component,
OnInit,
Renderer2,
ViewChild,
} from '@angular/core';
import { AboxItemComponent } from './abox-item/abox-item.component';

@Component({
selector: 'app-abox',
templateUrl: './abox.component.html',
styleUrls: ['./abox.component.less'],
})
export class AboxComponent implements OnInit {
private container;
activeIndex: number;
@ViewChild('containers') containers: any;
constructor(private rd2: Renderer2) {}

ngOnInit(): void {}

ngAfterViewInit(): void {
this.container = this.containers.nativeElement;
this.initCarouselWidth();
}

initCarouselWidth() {
this.rd2.setStyle(this.container, 'width', '100px');
}
}</pre>
</div>
<h2>Angular网络请求</h2>
<h3>HttpClient</h3>
需导入 <code>HttpClientModule</code> ，只在根模块中导入，并且整个应用只需导入一次，不用在其他模块导入
在构造函数中注入<code>HttpClient</code>，<code>get/post</code>方法对应HTTP方法，这些方法是泛型的，可以直接把返回的JSON转换成对应类型。若是不规范的请求，使用<code>request</code>方法
返回的值是 <code>Observable</code>，必须订阅才会发送请求，否则不会发送
get 请求数据
<div class="cnblogs_code">
<pre>// 在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
HttpClientModule
]

// 在用到的地方引入 HttpClient 并在构造函数声明
import {HttpClient} from "@angular/common/http";
constructor(private http: HttpClient,private cd: ChangeDetectorRef) { } // 依赖注入

// get 请求数据
var api = "http://baidu.com/api/productlist";
this.http.get(api).subscribe(response => {
console.log(response);
this.cd.markForCheck()；
// 如果改变了脏值检测的变更原则 changeDetection: ChangeDetectionStrategy.OnPush
// 则需要使用 this.cd.markForCheck() 手动提醒 Angular 这里需要进行脏值检测
});</pre>
</div>
post 提交数据
<div class="cnblogs_code">
<pre>// 在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
HttpClientModule
]

// 在用到的地方引入 HttpClient 、HttpHeaders 并在构造函数声明 HttpClient
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(private http:HttpClient) { } // 实例化

// post 提交数据
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "http://127.0.0.1:4200/doLogin";
this.http.post(api,{username:'瑞萌萌',age:'22'},httpOptions).subscribe(response => {
 console.log(response);
});</pre>
</div>
Jsonp请求数据
<div class="cnblogs_code">
<pre>// 在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入
import {HttpClientModule,HttpClientJsonpModule} from'@angular/common/http';
imports: [
BrowserModule,
HttpClientModule,
HttpClientJsonpModule
]

// 在用到的地方引入 HttpClient 并在构造函数声明
import {HttpClient} from "@angular/common/http";
constructor(private http:HttpClient) { } // 实例化

// jsonp 请求数据
var api = "http://baidu.com/api/productlist";
this.http.jsonp(api,'callback').subscribe(response => {
console.log(response);
});</pre>
</div>
<h3>拦截器</h3>
Angular 拦截器是 Angular 应用中全局捕获和修改 HTTP 请求和响应的方式，例如携带 <code>Token</code> 和捕获 <code>Error</code>
前提是只能拦截使用 <code>HttpClientModule</code> 发出的请求，如果使用 <code>axios</code> 则拦截不到
创建拦截器
<div class="cnblogs_code">
<pre>// 使用命令 ng g interceptor name，在这里创建拦截器 ng g interceptor LanJieQi
// cli 生成拦截器是没有简写方式的

import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {
constructor() {}
// 默认的 intercept() 方法只是单纯的将请求转发给下一个拦截器（如果有），并最终返回 HTTP 响应体的 Observable
// request: HttpRequest<unknown> 表示请求对象，包含了请求相关的所有信息,unknown指定请求体body的类型
// next: HttpHandler 请求对象修改完成，将修改后的请求对象通过next中的handle方法传回真正发送请求的方法中
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// next 对象表示拦截器链表中的下一个拦截器（在应用中可以设置多个拦截器）
return next.handle(request);
}
}</pre>
</div>
注入拦截器
<div class="cnblogs_code">
<pre>// 在 @NgModule 模块中注入拦截器
// 拦截器也是一个由 Angular 依赖注入 (DI) 系统管理的服务，也必须先提供这个拦截器类，才能使用它
// 由于拦截器是 HttpClient 服务的依赖，所以必须在提供 HttpClient 的同一个（或其各级父注入器）注入器中提供这些拦截器
@NgModule({
imports: [
HttpClientModule
// others...
],
providers: [
{
 provide: HTTP_INTERCEPTORS,
 useClass: LanJieQiInterceptor,
 // multi: true 表明 HTTP_INTERCEPTORS 是一个多重提供者的令牌，表示这个令牌可以注入多个拦截器
 multi: true
},
],
bootstrap:
})

export class AppModule { }</pre>
</div>
请求头拦截
<div class="cnblogs_code">
<pre>@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// 为了统一设置请求头，需要修改请求
// 但 HttpRequest 和 HttpResponse 实例的属性却是只读（readonly）的
// 所以修改前需要先 clone 一份，修改这个克隆体后再把它传给 next.handle()
let req = request.clone({
 setHeaders:{
 token:"123456" // 在请求头中增加 token：123456
 }
 // setHeaders 和 headers: request.headers.set('token', '123456') 一致
 })
 return next.handle(req)// 将修改后的请求返回给应用
}}</pre>
</div>
响应捕获
<div class="cnblogs_code">
<pre>@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// 为了统一设置请求头，需要修改请求
// 但 HttpRequest 和 HttpResponse 实例的属性却是只读（readonly）的
// 所以修改前需要先 clone 一份，修改这个克隆体后再把它传给 next.handle()
let req = request.clone({
 setHeaders:{
 token:"123456" // 在请求头中增加 token：123456
 }
 // setHeaders 和 headers: request.headers.set('token', '123456') 一致
 })
 return next.handle(req)// 将修改后的请求返回给应用
}
}</pre>
</div>
<blockquote>
如果有多个拦截器，请求顺序是按照配置顺序执行，响应拦截则是相反的顺序
如果提供拦截器的顺序是先 A再 B再 C，那么请求阶段的执行顺序就是 A->B->C，而响应阶段的执行顺序则是 C->B->A
</blockquote>
<h2>Angular表单</h2>
<h3>模版驱动表单</h3>
模板驱动表单在往应用中添加简单的表单时非常有用，但是不像响应式表单那么容易扩展
如果有非常基本的表单需求和简单到能用模板管理的逻辑，就使用模板驱动表单
<blockquote>
响应式表单和模板驱动表单共享了一些底层构造块：
<code>FormControl</code> 实例用于追踪单个表单控件的值和验证状态
<code>FormGroup</code> 用于追踪一个表单控件组的值和状态
<code>FormArray</code> 用于追踪表单控件数组的值和状态，有长度属性，通常用来代表一个可以增长的字段集合
<code>ControlValueAccessor</code> 用于在 Angular 的 <code>FormControl</code> 实例和原生 DOM 元素之间创建一个桥梁
</blockquote>
<code>FormControl</code> 和 <code>FormGroup</code> 是 angular 中两个最基本的表单对象
<code>FormControl</code> 代表单一的输入字段，它是 Angular 表单中最小单员，它封装了这些字段的值和状态，比如是否有效、是否脏（被修改过）或是否有错误等
<code>FormGroup</code> 可以为一组 <code>FormControl</code> 提供总包接口（wrapper interface），来管理多个 <code>FormControl</code>
当我们试图从 <code>FormGroup</code> 中获取 value 时，会收到一个 “键值对” 结构的对象
它能让我们从表单中一次性获取全部的值而无需逐一遍历 <code>FormControl</code>，使用起来相当顺手
<code>FormGroup</code> 和 <code>FormControl</code> 都继承自同一个祖先 <code>AbstractControltractControl</code>（这是 <code>FormControl</code>，<code>FormGroup</code> 和 <code>FormArray</code> 的基类）
首先加载 <code>FormsModule</code>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// 先在 NgModule 中导入了 FormsModule 表单库
// FormsModule 为我们提供了一些模板驱动的指令，例如：ngModel、NgForm
import {
FormsModule
} from '@angular/forms';

@NgModule({
declarations: [
FormsDemoApp,
DemoFormSku,
// ... our declarations here
],
imports: [
BrowserModule,
FormsModule,
],
bootstrap: [ FormsDemoApp ]
})
class FormsDemoAppModule {}</pre>
</div>
接下来创建一个模版表单
<div class="cnblogs_code">
<pre> <div>
 <h2>基础表单:商品名称</h2>
 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
 <div class="sku">
 <label for="skuInput">商品名称:</label>
 <input
 type="text"
 id="skuInput"
 placeholder="商品名称"
 name="sku" //使用form时必须定义，可以理解为当前控件的名字
 ngModel
 />
 </div>
 <button>提交</button>
 </form>
</div></pre>
</div>
我们导入了 <code>FormsModule</code>，因此可以在视图中使用 <code>NgForm</code> 了
当这些指令在视图中可用时，它就会被附加到任何能匹配其 selector 的节点上
<code>NgForm</code> 做了一件便利但隐晦的工作：它的选择器包含 form 标签（而不用显式添加 <code>ngForm</code> 属性）
这意味着当导入 <code>FormsModule</code> 时候，<code>NgForm</code> 就会被自动附加到视图中所有的标签上
<code>NgForm</code> 提供了两个重要的功能：
<ul>
<li>一个 <code>ngForm</code> 的 <code>FormGroup</code> 对象</li>
<li>一个输出事件 (<code>ngSubmit</code>)</li>
</ul>
<div class="cnblogs_code">
<pre> <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" >
</pre>
</div>
<code>NgModel</code> 会创建一个新的 <code>FormControl</code> 对象，把它自动添加到父 <code>FormGroup</code> 上（这里也就是 form 表单对象）
并把这个 <code>FormControl</code> 对象绑定到一个 DOM 上
也就是说，它会在视图中的 <code>input</code> 标签和 <code>FormControl</code> 对象之间建立关联
这种关联是通过 <code>name</code> 属性建立的，在本例中是 <code>"name"</code>
<h3>响应式表单</h3>
使用 <code>ngForm</code> 构建 <code>FormControl</code> 和 <code>FormGroup</code> 很方便，但是无法提供定制化选项，因此引入响应式表单
响应式表单提供了一种模型驱动的方式来处理表单输入，其中的值会随时间而变化
使用响应式表单时，通过编写 TypeScript 代码而不是 HTML 代码来创建一个底层的数据模型
在这个模型定义好以后，使用一些特定的指令将模板上的 HTML 元素与底层的数据模型连接在一起
<code>FormBuilder</code> 是一个名副其实的表单构建助手（可以把他看作一个 “工厂” 对象）
在先前的例子中添加一个 <code>FormBuilder</code>，然后在组件定义类中使用 <code>FormGroup</code>
<div class="cnblogs_code">
<pre>// 先在 NgModule 中导入了 ReactiveFormsModule 表单库
import {
ReactiveFormsModule
} from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
]
})

// 使用 formGroup 和 formControl 指令来构建这个组件，需要导入相应的类
import {
FormBuilder,
FormGroup,
ReactiveFormsModule
} from '@angular/forms';

// 在组件类上注入一个从 FormBuilder 类创建的对象实例，并把它赋值给 fb 变量（来自构造函数）
export class DemoFormSkuBuilder {
myForm: FormGroup;// myForm 是 FormGroup 类型
constructor(fb: FormBuilder) {
// FormBuilder 中的 group 方法用于创建一个新的 FormGroup
// group 方法的参数是代表组内各个 FormControl 的键值对
this.myForm = fb.group({// 调用 fb.group () 来创建 FormGroup
 // 设置一个名为 sku 的控件，控件的默认值为 "123456"
 'sku': ['123456']
});
}
onSubmit(value: string): void {
console.log('submit value:', value);
}
}</pre>
</div>
在视图表单中使用自定义的 <code>FormGroup</code>
<div class="cnblogs_code">
<pre><h2 class="ui header">Demo Form: Sku with Builder</h2>

<form ="myForm"
<label for="skuInput"> SKU </label>
<input type="text"
id="skuInput"
placeholder="SKU"
="myForm.controls['sku']">
</pre>
</div>
<blockquote>
记住以下两点：
<ol>
<li>如果想隐式创建新的 FormGroup 和 FormControl，使用：ngForm、ngModel</li>
<li>如果要绑定一个现有的 FormGroup 和 FormControl，使用：formGroup、formControl</li>
</ol></blockquote>
<h3>表单验证</h3>
用户输入的数据格式并不总是正确的，如果有人输入错误的数据格式，我们希望给他反馈并阻止他提交表单
因此，我们要用到验证器，由 <code>validators</code> 模块提供
<code>Validators.required</code> 是最简单的验证，表明指定的字段是必填项，否则就认为 <code>FormControl</code> 是无效的
如果 <code>FormGroup</code> 中有一个 <code>FormControl</code> 是无效的，那整个 <code>FormGroup</code> 都是无效的
要为 <code>FormControl</code> 对象分配一个验证器，可以直接把它作为第二个参数传给 <code>FormControl</code> 的构造函数
<div class="cnblogs_code">
<pre>const control = new FormControl('name', Validators.required);

// 在组件定义类中使用 FormBuilder
constructor(fb: FormBuilder) {
this.myForm = fb.group({
 'name': ['',Validators.required]
});
this.name = this.myForm.controls['name'];
}</pre>
</div>
在视图中检查验证器的状态，并据此采取行动
<div class="cnblogs_code">
<pre>template:`<div>
 <h2>商品表单:商品名称</h2>
 <form ="myForm" (ngSubmit)="onSubmit(myForm)">
 <div>
 <label for="nameInput">商品名称：</label>
 <input
 type="text"
 id="nameInput"
 placeholder="请输入名称"
 ="myForm.controls['name']"
 />
 <div style="color:red" *ngIf="!name.valid">
 名称无效
 </div>
 <div style="color:red" *ngIf="name.hasError('textinvalid')">
 名称不是以“123”开头
 </div>
 <div *ngIf="name.dirty">
 数据已变动
 </div>
 </div>
 <div>
 <label for="codeInput">商品料号：</label>
 <input
 type="text"
 id="codeInput"
 placeholder="请输入料号"
 ="myForm.controls['code']"
 />
 <div
 style="color:red"
 *ngIf="myForm.controls.code.hasError('required')"
 >
 该项必填
 </div>
 <div
 style="color:red"
 *ngIf="myForm.controls.code.hasError('pattern')"
 >
 只可输入数字和英文
 </div>
 </div>
 <div style="color:green" *ngIf="myForm.isvalid">
 表单无效
 </div>
 <div style="color:green" *ngIf="myForm.valid">
 表单有效
 </div>
 <button type="submit">提交</button>
 </form>
</div>`
export class NonInWarehouseComponent implements OnInit {
myForm: FormGroup;
name: AbstractControl;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
 name: ['牛奶', Validators.compose()],
 code: ['', *$')]],
});
this.name = this.myForm.controls.name;
}
ngOnInit() {
const nameControl = new FormControl('nate');
console.log('nameControl', nameControl);
}
onSubmit(a: any) {
console.log('a', a);
}
}</pre>
</div>
内置校验器
Angular 提供了几个内置校验器，下面是比较常用的校验器：
<ul>
<li><code>Validators.required</code> - 表单控件值非空</li>
<li><code>Validators.email</code> - 表单控件值的格式是 email</li>
<li><code>Validators.minLength()</code> - 表单控件值的最小长度</li>
<li><code>Validators.maxLength()</code> - 表单控件值的最大长度</li>
<li><code>Validators.pattern()</code> - 表单控件的值需匹配 pattern 对应的模式（正则表达式）</li>
</ul>
自定义验证器
假设我们的 name 有特殊的验证需求，比如 name 必须以 123 作为开始
当输入值（控件的值 <code>control.value</code>）不是以 123 作为开始时，验证器会返回错误代码 <code>invalidSku</code>
<div class="cnblogs_code">
<pre>// angular 源代码中实现 Validators.required 
export class Validators {
// 接收一个 AbstractControl 对象作为输入
static required(control: AbstractControl): ValidationErrors | null;
}
// 当验证器失败时，会返回一个 String Map<string,any> 对象，他的键是” 错误代码 “，它的值是 true
export declare type ValidationErrors = {
: any;
};

// 自定义验证器
function textValidator(
controls: FormControl // 因为FormControl继承于 AbstractControl 所以也可以写成FormControl对象
): {
: boolean;
} {
if (!controls.value.match(/^123/)) {
return { textinvalid: true };
}
}</pre>
</div>
给 <code>FormControl</code> 分配验证器，但是 name 已经有一个验证器了，如何在同一个字段上添加多个验证器
用 <code>Validators.compose</code> 来实现
<code>Validators.compose</code> 把两个验证器包装在一起，我们可以将其赋值给 <code>FormControl</code>
只有当两个验证器都合法时，<code>FormControl</code> 才是合法的
<div class="cnblogs_code">
<pre>Validators.compose()
// 不用compose 
// 保留 compose 是为了向以前历史版本进行兼容，不用 compose 也可实现</pre>
</div>
<h3>动态表单</h3>
要实现 Angular 动态表单，主要使用 <code>formArray</code> 方法，<code>formArray</code> 生成的实例是一个数组，在这个数组中可以动态的放入 <code>formGroup</code> 和 <code>formControl</code>，这样便形成了动态表单。
<div class="cnblogs_code">
<pre>export class ReativeFormsComponent implements OnInit {
ngOnInit() {
this.addContact()
}
//动态表单
personMess: FormGroup = new FormGroup({
//生成动态表单数组
contacts: new FormArray([])
})
//获取数组对象
get contacts(){
return this.personMess.get('contacts') as FormArray
}
//增加一个表单组
addContact(){
let myContact = new FormGroup({
 name: new FormControl(),
 phone: new FormControl()
})
this.contacts.push(myContact)
}
//删除一个表单组
deleteContact(i:number){
this.contacts.removeAt(i)
}
//提交表单
OnSubmit() {
console.log(this.personMess.value)
}
}
<form ="personMess" (submit)="OnSubmit()">
<div formArrayName="contacts">

<div *ngFor="let contact of contacts.controls;let i =index" ="i">
 <input type="text" formControlName="name">
 <input type="text" formControlName="phone">
 <button (click)="deleteContact(i)">删除信息</button>
</div>
</div>
<button (click)="addContact()">添加信息</button> 
<input type="submit">
</form></pre>
</div>
<h2>Angular CDK</h2>
CDK 是 <code>Component Dev kit</code> 的简称，是 Angular Material 团队在开发 Library 时发现组件有很多相似的地方，最后进行了抽取，提炼出了公共的逻辑，这部分即是 CDK
官方用了一个很形象的比喻：如果组件库是火箭飞船，那么 CDK 就是发动机零件盒 <img src="https://img.php.cn/upload/article/000/000/024/813ac9748951760246e3aa9213c016f1-9.png">
更多编程相关知识，请访问：编程入门！！ 
来源：https://www.cnblogs.com/moiom/p/16963973.html

頁: [1]

琼殿技术论坛's Archiver

Angular新手入门指南【最全】