讲课内容

1、 上传本地图片显示发生了unsage

1. iframe 的 src 属性是资源 URL 安全上下文，由于不可信源能够在用户不知情的状况下执行某些不安全的操做。
2. DomSanitizer 安全URL脚本访问
3. XSS ：是网站 Angular 2 如何保护咱们免受 XSS 攻击 Angular 2 中默认将全部输入值视为不受信任。当咱们经过 property，attribute，样式，类绑定或插值等方式，将一个值从模板中插入到DOM中时，Angular 2 会自帮咱们清除和转义不受信任的值。咱们来看一下具体示例： 报错：unsafe value used in a resource URL context

在Angular4中，经过input:file上传选择图片本地预览的时候，经过window.URL.createObjectURL获取的url赋值给image的src出现错误：

WARNING: sanitizing unsafe URL value 下面介绍一下解决方法： html代码： 1 2 <input type="file" (change)="fileChange($event)" > <img [src]="imgUrl" alt=""> 其中，change方法会在每次选择图片后调用，image的src必须经过属性绑定的形式，使用插值表达式一样会出错

import { Component, OnInit } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {

imgUrl;

constructor( private sanitizer: DomSanitizer ){}

ngOnInit() { }

fileChange(event){ let file = event.target.files[0]; let imgUrl = window.URL.createObjectURL(file); let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);

this.imgUrl = sanitizerUrl;
复制代码

} } 首先，引入DomSanitizer，而后在构造器里面注入， 最重要的就是把window.URL.createObjectURL生成的imgUrl经过santizer的bypassSecurityTrustUrl方法，将它转换成安全路径。 最后将生成的安全的url赋值给imgUrl，此时就没有问题了~ https://blog.csdn.net/Neokekeke/article/details/78739035

template ng-template templateUrl

• 神族
• 人族
• 虫族

在真实的业务开发里面，另外一个典型的嵌套组件就是 Tab 页，如下代码是很常见的： 若是没有内容投影机制，想要这样嵌套地使用自定义标签也是不可能的。

内容投影存在的第二个意义与组件的封装有关。

虽然 Angular 提供了 @Component 装饰器让开发者能够自定义标签，可是请不要忘记，自定义标签毕竟与 HTML 原生标签不同，原生 HTML 标签上面默认带有不少属性、事件，而你本身定义标签是没有的。原生 HTML 标签上面暴露的属性和事件列表请参见 W3C 的规范。

从宏观的角度看，全部的自定义标签都只不过是一层“虚拟的壳子”，浏览器并不认识自定义标签，真正渲染出来的仍是 div、form、input 之类的原生标签。因此，自定义标签只不过是一层逻辑上的抽象和包装，让人类更容易理解和组织本身的代码而已。

既然如此，自定义标签和 HTML 原生标签之间的关系是什么呢？本质上说，这是“装饰模式”的一种应用，而内容投影存在的意义就是可让这个“装饰”的过程作得更加省力、更加优雅一些。 @ContentChildren(ChildTwoComponent) childrenTwo:QueryList;
// @ContentChild(ChildTwoComponent) // childTwo:ChildTwoComponent; /在ngAfterContentInit钩子里面访问被投影进来的组件 @ViewChild 与 @ViewChildren
咱们能够利用 @ViewChild 这个装饰器来操控直属的子组件。 在ngAfterViewInit这个钩子里面能够直接访问子组件

生命周期

1. https://segmentfault.com/a/1190000010928087
2. onPush策略变动检测
3. 变动检测的策略 第2-5课：组件：生命周期钩子 我不打算在这里罗列 API，在官方网站上面有更详细的描述和例子。

在这一节里面咱们只讨论如下4件事：

什么是 UI 组件的生命周期？ Angular 组件的生命周期有什么特别的地方？ OnPush 策略的使用方式。 简要介绍脏检查的实现原理。 UI 组件的生命周期 enter image description here

不管使用什么样的前端框架，只要编写 UI 组件，生命周期都是必需要考虑的重要内容。请展开你的想象，若是让你来设计 UI 系统，组件有几个重要的阶段必定是绕不开的，好比：

初始化（ init ）阶段：在这个阶段你须要把组件 new 出来，把一些属性设置上去，等等这些操做。 渲染（ render ）阶段：在这个阶段需你要把组件的模板和数据结合起来，生成 HTML 标签结构，而且要整合到现有的 DOM 树里面去。 存活阶段：既然带有 UI，那么在组件的存活期内就必定会和用户进行交互。通常来讲，带有 UI 的系统都是经过事件机制进行用户交互的。也就是说，这个阶段将会处理大量的用户事件：鼠标点击、键盘按键、手指触摸。 销毁（ destory ）阶段：最后，组件使用完了，须要把一些资源释放掉。最典型的操做：须要把组件上的全部事件所有清理干净，避免形成内存泄漏。 在组件生命的不一样阶段，框架通常会暴露出一些“接口”，开发者能够利用这些接口来实现一些本身的业务逻辑。这种接口在有些框架里面叫作“事件”，在 Angular 里面叫作“钩子”，但其底层的本质都是同样的。

Angular 组件的生命周期钩子 enter image description here

Angular 一共暴露了8个“钩子”，构造函数不算。 并无组件或者指令会实现所有钩子。 绿色的4个钩子可能会被执行不少次，紫色的只会执行一次。 Content 和 View 相关的4个钩子只对组件有效，指令上不能使用。由于在新版本的 Angular 里面，指令不能带有 HTML 模板。指令没有本身的 UI，固然就没有 View 和 Content 相关的“钩子”了。 请不要在生命周期钩子里面实现复杂的业务逻辑，尤为是那4个会被反复执行的钩子，不然必定会形成界面卡顿。 OnPush 策略 在真实的业务系统中，组件会构成 Tree 型结构，就像这样：

enter image description here

当某个叶子组件上的数据模型发生变化以后，就像这样：

enter image description here

这时候，Angular 将会从根组件开始，遍历整颗组件树，把全部组件上的 ngDoCheck() 方法都调用一遍：

enter image description here

请注意，默认状况下，不管哪一个叶子组件上发生了变化，都会把整个组件树遍历一遍。若是组件树很是庞大，嵌套很是深，很明显会有效率问题。在绝大部分时间里面，并不会出现每一个组件都须要刷新的状况，根本没有必要每次都去所有遍历。因此 Angular 提供了一种叫作 OnPush 的策略，只要把某个组件上的检测策略设置为 OnPush，就能够忽略整个子树了，就像这样：

enter image description here

很明显，使用了 OnPush 策略以后，检查效率将会得到大幅度的提高，尤为在组件的数量很是多的状况下：

enter image description here

Angular 内置的两种变动检测策略：

Default：不管哪一个组件发生了变化，从根组件开始全局遍历，调用每一个组件上的 ngDoCheck() 钩子。 OnPush：只有当组件的 @Input 属性发生变化的时候才调用本组件的 ngDoCheck() 钩子。 有一些开发者建议 Angular 项目组把 OnPush 做为默认策略，可是目前尚未获得官方支持，或许在将来的某个版本里面会进行修改。

了解一点点原理 若是你不想看到扯原理的内容，能够跳过这一小段。

enter image description here

你们都知道，AngularJS 是第一个把“双向数据绑定”这种设计带到前端领域来的框架，“双向数据绑定”最典型的场景就是对表单的处理。

双向数据绑定的目标很明确：数据模型发生变化以后，界面能够自动刷新；用户修改了界面上的内容以后，数据模型也会发生自动修改。

很明显，这里须要一种同步机制，在 Angular 里面这种同步机制叫作“变动检测”。

在老版本 AgnularJS 里面，变动检测机制实现得不太完善，常常会出现检测不到变动的状况，因此才有了让你们很厌烦的 $apply() 调用。

在新版本的 Angular 里面再也不存在这个问题了，由于新版本的 Angular 使用 Zone.js 这个库，它会把全部可能致使数据模型发生变动的状况所有拦截掉，从而在数据发生变化的时候去通知 Angular 进行刷新。

有一些朋友可能会以为奇怪，Zone.js 怎么这么牛叉？它内部究竟是怎么玩的呢？

实际上要作到这一点并不复杂，由于在浏览器环境下，有可能致使数据模型发生变化的状况只有3种典型的回调：

事件回调：鼠标、键盘、触摸 定时器回调：setTimeout 和 setInterval Ajax 回调 Zone.js 覆盖了全部原生实现，当开发者在调用这些函数的时候，并非调用的原生方法，而是调用的 Zone.js 本身的实现，因此 Zone.js 就能够作一些本身的处理了。

变动检测

概述 简单来讲变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。

什么状况下会引发变化检测？ 总结起来, 主要有以下几种状况可能也改变数据：

用户输入操做，好比点击，提交等 请求服务端数据(XHR) 定时事件，好比setTimeout，setInterval 上述三种状况都有一个共同点，即这些致使绑定值发生改变的事件都是异步发生的。若是这些异步的事件在发生时可以通知到Angular框架，那么Angular框架就能及时的检测到变化。

图片描述

左边表示将要运行的代码，这里的stack表示Javascript的运行栈，而webApi则是浏览器中提供的一些Javascript的API，TaskQueue表示Javascript中任务队列，由于Javascript是单线程的，异步任务在任务队列中执行。

具体来讲，异步执行的运行机制以下:

全部同步任务都在主线程上执行，造成一个执行栈（execution context stack）。 主线程以外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之 中放置一个事件。 一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。 主线程不断重复上面的第三步。 当上述代码在Javascript中执行时，首先func1 进入运行栈，func1执行完毕后，setTimeout进入运行栈，执行setTimeout过程当中将回调函数cb 加入到任务队列，而后setTimeout出栈，接着执行func2函数，func2函数执行完毕时，运行栈为空，接着任务队列中cb 进入运行栈获得执行。能够看出异步任务首先会进入任务队列，当运行栈中的同步任务都执行完毕时，异步任务进入运行栈获得执行。若是这些异步的任务执行前与执行后能提供一些钩子函数，经过这些钩子函数，Angular便能获知异步任务的执行。

angular2 获取变化通知 那么问题来了，angular2是如何知道数据发生了改变？又是如何知道须要修改DOM的位置，准确的最小范围的修改DOM呢？没错，尽量小的范围修改DOM，由于操做DOM对于性能来讲但是一件奢侈品。

在AngularJS中是由代码apply()或者digest触发，而Angular接入了ZoneJS，由它监听了Angular全部的异步事件。

ZoneJS是怎么作到的呢？

实际上Zone有一个叫猴子补丁的东西。在Zone.js运行时，就会为这些异步事件作一层代理包裹，也就是说Zone.js运行后，调用setTimeout、addEventListener等浏览器异步事件时，再也不是调用原生的方法，而是被猴子补丁包装事后的代理方法。代理里setup了钩子函数, 经过这些钩子函数, 能够方便的进入异步任务执行的上下文.

//如下是Zone.js启动时执行逻辑的抽象代码片断 function zoneAwareAddEventListener() {...} function zoneAwareRemoveEventListener() {...} function zoneAwarePromise() {...} function patchTimeout() {...} window.prototype.addEventListener=zoneAwareAddEventListener; window.prototype.removeEventListener=zoneAwareRemoveEventListener; window.prototype.promise = zoneAwarePromise; window.prototype.setTimeout = patchTimeout; 变化检测的过程 Angular的核心是组件化，组件的嵌套会使得最终造成一棵组件树。Angular的变化检测能够分组件进行，每个Component都对应有一个changeDetector，咱们能够在Component中经过依赖注入来获取到changeDetector。而咱们的多个Component是一个树状结构的组织，因为一个Component对应一个changeDetector，那么changeDetector之间一样是一个树状结构的组织.

另外，Angular的数据流是自顶而下，从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。尽管检查了父组件以后，子组件可能会改变父组件的数据使得父组件须要再次被检查，这是不被推荐的数据处理方式。在开发模式下，Angular会进行二次检查，若是出现上述状况，二次检查就会报错：Expression Changed After It Has Been Checked Error。而在生产环境中，脏检查只会执行一次。

相比之下，AngularJS采用的是双向数据流，错综复杂的数据流使得它不得很少次检查，使得数据最终趋向稳定。理论上，数据可能永远不稳定。AngularJS给出的策略是，脏检查超过10次，就认为程序有问题，再也不进行检查。

图片描述

变化检测策略 Angular有两种变化检测策略。Default是Angular默认的变化检测策略，也就是上述提到的脏检查,只要有值发生变化，就所有从父组件到全部子组件进行检查,。另外一种更加高效的变化检测方式：OnPush。OnPush策略，就是只有当输入数据(即@Input)的引用发生变化或者有事件触发时，组件才进行变化检测。

defalut 策略 main.component.ts

@Component({ selector: 'app-root', template: `

变动检测策略

{{ slogan }}

改变明星属性 改变明星对象 `, }) export class AppComponent { slogan: string = 'change detection'; title: string = 'default 策略'; star: Star = new Star('周', '杰伦'); changeStar() { this.star.firstName = '吴'; this.star.lastName = '彦祖'; } changeStarObject() { this.star = new Star('刘', '德华'); }

} movie.component.ts

@Component({ selector: 'movie', styles: ['div {border: 1px solid black}'], template: `

{{ title }}

Star: {{star.firstName}} {{star.lastName}}

`,

}) export class MovieComponent { @Input() title: string; @Input() star;

} 上面代码中, 当点击第一个按钮改变明星属性时,依次对slogan, title, star三个属性进行检测, 此时三个属性都没有变化, star没有发生变化,是由于实质上在对star检测时只检测star自己的引用值是否发生了改变，改变star的属性值并未改变star自己的引用，所以是没有发生变化。

而当咱们点击第二个按钮改变明星对象时 ，从新new了一个 star ，这时变化检测才会检测到 star发生了改变。

而后变化检测进入到子组件中,检测到star.firstName和star.lastName发生了变化, 而后更新视图.

OnPush策略 与上面代码相比, 只在movie.component.ts中的@component中增长了一行代码:

changeDetection:ChangeDetectionStrategy.OnPush 此时, 当点击第一个按钮时, 检测到star没有发生变化, ok,变化检测到此结束, 不会进入到子组件中, 视图不会发生变化.

当点击第二个按钮时,检测到star发生了变化, 而后变化检测进入到子组件中,检测到star.firstName和star.lastName发生了变化, 而后更新视图.

因此，当你使用了OnPush检测机制时，在修改一个绑定值的属性时，要确保同时修改到了绑定值自己的引用。可是每次须要改变属性值的时候去new一个新的对象会很麻烦，immutable.js 你值得拥有！

变化检测对象引用 经过引用变化检测对象ChangeDetectorRef，能够手动去操做变化检测。咱们能够在组件中的经过依赖注入的方式来获取该对象：

constructor( private changeRef:ChangeDetectorRef ){} 变化检测对象提供的方法有如下几种：

markForCheck() - 在组件的 metadata 中若是设置了 changeDetection:ChangeDetectionStrategy.OnPush 条件，那么变化检测不会再次执行，除非手动调用该方法, 该方法的意思是在变化监测时必须检测该组件。 detach() - 从变化检测树中分离变化检测器，该组件的变化检测器将再也不执行变化检测，除非手动调用 reattach() 方法。 reattach() - 从新添加已分离的变化检测器，使得该组件及其子组件都能执行变化检测 detectChanges() - 从该组件到各个子组件执行一次变化检测 OnPush策略下手动发起变化检测 组件中添加事件改变输入属性

在上面代码movie.component.ts中修改以下

@Component({ selector: 'movie', styles: ['div {border: 1px solid black}'], template: `

{{ title }}

点击切换名字 Star: {{star.firstName}} {{star.lastName}}

`, changeDetection:ChangeDetectionStrategy.OnPush }) export class MovieComponent { constructor( private changeRef:ChangeDetectorRef ){} @Input() title: string; @Input() star;

changeStar(){ this.star.lastName = 'xjl'; } } 此时点击按钮切换名字时,star更改以下

![图片描述][3] 第二种就是上面讲到的使用变化检测对象中的 markForCheck()方法.

ngOnInit() { setInterval(() => { this.star.lastName = 'xjl'; this.changeRef.markForCheck(); }, 1000); } 输入属性为Observable 修改app.component.ts

@Component({ selector: 'app-root', template: `

变动检测策略

{{ slogan }}

改变明星属性 改变明星对象 `, }) export class AppComponent implements OnInit{ slogan: string = 'change detection'; title: string = 'OnPush 策略'; star: Star = new Star('周', '杰伦'); count:Observable