1.一个小问题，挺烦人的，记下来：
注意，修饰和类之间，一定记得加一个空行，不然出错，还不知道错在哪里。
2.Uint8Array数组的拷贝部分，使用：
const partdatas = new Uint8Array(uploadlength);
partdatas.set(datas.subarray(uploadedLen, uploadedLen + uploadlength));
注意：subarray的参数，是start与end，并且不包含end
2.使用 ngModel时需要 FormsModule
3.带 trackBy 的 *ngFor
ngFor 指令有时候会性能较差，特别是在大型列表中。 对一个条目的一丁点改动、移除或添加，都会导致级联的 DOM 操作。
例如，重新从服务器查询可以刷新包括所有新英雄在内的英雄列表。
他们中的绝大多数（如果不是所有的话）都是以前显示过的英雄。你知道这一点，是因为每个英雄的 id 没有变化。 但在 Angular 看来，它只是一个由新的对象引用构成的新列表， 它没有选择，只能清理旧列表、舍弃那些 DOM 元素，并且用新的 DOM 元素来重建一个新列表。
如果给它指定一个 trackBy，Angular 就可以避免这种折腾。 往组件中添加一个方法，它会返回 NgFor应该追踪的值。 在这里，这个值就是英雄的 id。
src/app/app.component.ts
trackByHeroes(index: number, hero: Hero): number { return hero.id; }
在微语法中，把 trackBy 设置为该方法。
<div *ngFor="let hero of heroes; trackBy: trackByHeroes">
({{hero.id}}) {{hero.name}}
</div>
4.Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。 下例中，当 currentHero 为空时，保护视图渲染器，让它免于失败。
The current hero's name is {{currentHero?.name}}
5,:host 选择器
使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。
:host {
display: block;
border: 1px solid black;
}
:host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。
要把宿主样式作为条件，就要像函数一样把其它选择器放在 :host 后面的括号中。
下一个例子再次把宿主元素作为目标，但是只有当它同时带有 active CSS 类的时候才会生效。
:host(.active) {
border-width: 3px;
}
6.<ng-template>指令
<ng-template>是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把 <ng-template> 及其内容替换为一个注释。
在Angular里，通常将它当作一个嵌入式的模版
通过ViewChild获取它的一个实例，可见它是一个TemplateRef实例
7.<ng-container>
Angular 的 <ng-container> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。
<ng-container> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。
Angular2使用<ng-content>元素作内容映射，所谓内容映射，是指在组件内嵌入模版代码，方便定制可复用的组件。
我们定义两个组件<app-wrapper>和<app-counter>来说明<ng-content>的用处。
//<app-wrapper>
import { Component } from '@angular/core';
@Component({
selector: 'app-wrapper',
template: <div> <h1>Test ng-content</h1> </div> <ng-content> </ng-content>})
export class WrapperComponent {}
//<app-counter>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-counter',
template: <p>{{count}}</p>
})
export class CounterComponent {
private static id = 1;
count: number;
constructor() {
this.count = CounterComponent.id++;
}
}
使用：
<app-wrapper>
<app-counter>3</app-counter>
<app-counter>2</app-counter>
<app-counter>1</app-counter>
</app-wrapper></pre>
效果：
可以看见<app-counter>元素作为内容映射到了<app-wrapper>内部，相当于替换掉了<ng-content>
ng-container
<ng-container>是Angular2定义的一个特殊的tag。
<ng-container>测试文本</ng-container>
上面的代码渲染到页面时：
可以看到<ng-container>并不存在，它仅仅是作为一个容器使用。
<ng-container *ngIf="false">测试文本</ng-container></pre>
在它之上我们可以使用Angular的指令，而不像<div>之类的元素影响布局。
注意：<ng-container>awtrasf</ng-container>,这是个容器而已。
<ng-content>这是个占位符，注意二者的区别。
