1. 起源

CDK是Component Dev kit的简称，首次提出是在2017年（PS：2017.07推出了可用的Beta版本），是Angular Material团队在开发Library时发现组件有很多相似的地方，最后进行了抽取，提炼出了公共的逻辑，这部分即是CDK，具体可以观看[2017年Angular Mix大会上的Jeremy Elbourn的介绍。

1. Dependencies

• @angular/cdk
• @angular/material

2. file-upload组件

• file-upload.component.html

  1	<div class="upload-container"
  2	#uploadzone
  3	dropzone
  4	[class.hovering]="uploadzone.isHovering"
  5	(hovered)="uploadzone.isHovering = $event"
  6	(dropped)="onDrop($event)"
  7	(click)="onClick()">
  8	<p class="icon"><mat-icon>cloud_upload</mat-icon></p>
  9	<p class="title">Click or drag file to this area to upload</p>
  10	<p class="desc">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
  11	</div>
  12
  13	<ul>
  14	<li *ngFor="let file of files" [@fadeInOut]="file.state">
  15	<mat-progress-bar [value]="file.progress"></mat-progress-bar>
  16	<span class="file-label">
  17	{{file.data.name}}
  18	<a title="Retry" (click)="retryFile(file)" *ngIf="file.canRetry">
  19	<mat-icon>refresh</mat-icon></a>
  20	<a title="Cancel" (click)="cancelFile(file)" *ngIf="file.canCancel">
  21	<mat-icon>cancel</mat-icon></a>
  22	</span>
  23	</li>
  24	</ul>
  25
  26	<input
  27	type="file"
  28	id="fileUpload"
  29	name="fileUpload"
  30	multiple="multiple"
  31	accept="{{accept}}"
  32	style="display:none;"/>

• file-upload.component.scss

1. 前言

渐进式Web应用程序（PWA）是一种Web应用程序，它提供了一组功能，可以为网站提供类似App的体验。

2. 安装

==特别提醒：以下是采用了angular/cli 9.1==

• 使用脚手架将pwa集成到我们的项目里

  1	// 终端命令
  2	ng add @angular/pwa
  3
  4
  5	// 以下是输出信息
  6	localhost:d1 apple$ ng add @angular/pwa
  7	Installing packages for tooling via npm.
  8	Installed packages for tooling via npm.
  9	CREATE ngsw-config.json (620 bytes)
  10	CREATE src/manifest.webmanifest (1296 bytes)
  11	CREATE src/assets/icons/icon-128x128.png (1253 bytes)
  12	CREATE src/assets/icons/icon-144x144.png (1394 bytes)
  13	CREATE src/assets/icons/icon-152x152.png (1427 bytes)
  14	CREATE src/assets/icons/icon-192x192.png (1790 bytes)
  15	CREATE src/assets/icons/icon-384x384.png (3557 bytes)
  16	CREATE src/assets/icons/icon-512x512.png (5008 bytes)
  17	CREATE src/assets/icons/icon-72x72.png (792 bytes)
  18	CREATE src/assets/icons/icon-96x96.png (958 bytes)
  19	UPDATE angular.json (3795 bytes)
  20	UPDATE package.json (1319 bytes)
  21	UPDATE src/app/app.module.ts (604 bytes)
  22	UPDATE src/index.html (470 bytes)
  23	✔ Packages installed successfully.
  24	localhost:d1 apple$

1. 前言

最近收到一个需求，说要在html里显示这样的文本信息：`{{ $random }} 产生随机数`，但是`{{ }}`插值表达式被插入html的时候默认会被Angular解析，最终显示：`产生随机数`，显然不是我们想要的结果！怎么办呢？

2. 解决方案

原来Angular是可以使用指令禁用这个插值表达式的，即：ngNonBindable

1. 前言

我们在项目中有的时候想要动态设置网页的title，有的时候会根据某种需求去动态设置meta信息，那么在SPA的Angular中如何做到呢？（PS：当然你可能会想，直接写javascript脚本修改不就OK了？！，下面要讨论的是如何用Angular的方式去修改。）

2. 如何修改网页的Title呢？

1. 前言

当我们的Angular项目越来越大之后，我们会发现我们的每一个模块都散落在很深层次的路径当中，当我们需要导入某个模块或者组件时，我们会发现我们import的TypeScript路径可读性非常的差。当然你可以说，我们强大的IDE不就帮我把这个解决了吗，其实我们完全可以写得更优雅一些，import的path完全不需要那么长，那么怎么解决这个问题呢？答案就是：TypeScript Path Mapping。

前言

• vim语法高亮

1

vim ~/.vimrc

2

3

// 然后在文件中添加如下代码

4

syntax on

5

colorscheme darkblue

• vim在线中文帮助文档

1. 插入文本

Rxjs学习之路

1、小贴士

这篇文章是我的Angular Rxjs Series中的第六篇文章，在继续阅读本文之前，您至少应该熟悉系列中的第一篇基础文章

Rxjs6都改变了些什么？

Rxjs【Observable】

1

// 图谱

2

// ----- 代表一个Observable

3

// -----X 代表一个Observable有错误发生

4

// -----| 代表一个Observable结束

5

// (1234)| 代表一个同步Observable结束

6

7

// 以下的操作符介绍均采用rxjs6的写法！！！

1.ffmpeg常用命令

1. 视频录制命令
2. 多媒体文件的分解/复用命令
3. 裁剪与合并互转命令
4. 直播相关命令
5. 各种滤镜命令

1

1. 视频--H264编码/解码

2

2. 音频--ACC编码/解码

2.应用场景

• 直播类：音视频会议、教育直播、娱乐/游戏
• 短视频：抖音、快手
• 网络视频：腾讯视频、优酷视频、爱奇艺
• 视频通话：微信、QQ
• 视频监控：幼儿园、停车场
• 人工智能：人脸视频、智能音箱

1. 前言

实际工作中，你有没有填写表单的时候，错误地点击了某一个按钮，或者没有完成整个填写表单过程就退回去了，最后刚刚填写的一推信息全丢失了，重新进入一片空白，还得重新填！这简直不能忍受！

在angular中有没有办法可以解决以上问题呢？答案是肯定的。CanDeactivate路由拦截器，除非给定条件成立，否则Angular路由无法从当前页面路由到另一个页面。