第三方

ngx

material

cdk

compdoc

{
    "scripts":  {
              "compodoc": "compodoc -p tsconfig.json -d ./compodoc -s -o"
  }
}

#ng-zorro

【nz-modal】服务方式创建可destroy

在组件中可直接销毁destroy

【placeholder】

            <nz-cascader 
                nzPlaceHolder='类目' 
                [(ngModel)]="selectedCategory">
            </nz-cascader>

export class SearchWayComponent implements OnInit {
    selectedCategory: string;  // 这里不要赋值为''，否则placeholder不显示
}

Http

【http错误处理】拦截器

【加载层】rxjs的方法

异步

【async安全管道操作符】

<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">

表单

案例

• 字段分类 —— 响应式表单
• 表单提交模式 —— 模板驱动表单
• 添加颜色 —— 策略模式

  变化的表单（非正式的动态表单）

  每次必须重新渲染
  

  【formBuilder】

  <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
  <input formControlName="name">
  <input formControlName="address">
  <button type="submit">Purchase</button>
  </form>

import { FormBuilder } from '@angular/forms';
export class CartComponent implements OnInit {
  checkoutForm;
  constructor(
    private formBuilder: FormBuilder
  ) {
    this.checkoutForm = this.formBuilder.group({
      name: '',
      address: ''
    });
  }
    this.checkoutForm.reset();
}

组件

【emit】

可在html中直接emit

<button (click)="notify.emit()">notify me!</button>

【onchanges】
注意它是任意有一个属性改变即触发

【计算属性？】

does angular have the “computed property” feature like in vue.js?
计算属性是基于它们的响应式依赖进行缓存的、
方法相比计算属性之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

其它

【location】

import { Location } from '@angular/common';
this.location.back();

路由

【paramMap】

const HERO_ID = this.route.snapshot.paramMap.get('id')

  // 订阅（subscribe）路由参数并根据其 productId 获取商品信息
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });

Service

【service中间层】

可存数据：messages

export class MessageService {
    messages: string[] = [];
    constructor() { }
    add(message: string): void {
        this.messages.push(message);
    }
}

【公共服务】

<div *ngIf="messageService.messages.length">
  <button class="clear"
          (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>

export class MessagesComponent implements OnInit {
    // 这个 messageService 属性必须是公共属性，因为你将会在模板中绑定到它。
    // Angular 只会绑定到组件的公共属性。
  constructor(public messageService: MessageService) { }
}

TypeScript

【类型声明】

可用interface和class

class Book {
    id: number;
    name: string;
    author: string;
    summary: string;
    constructor(id?: number) {
        if (typeof id === 'number') {
            this.id = id;
            this.name = 'book' + id;
            this.author = 'author' + id;
            this.summary = 'summary' + id;
        }
    }
}
export {
    Book
}

【泛型as】

this.heroService.addHero({name} as Hero).subscribe(hero => {});

RXJS

【订阅】

    searchHeroes(term: string): Observable<Hero[]> {
        return this.http.get<Hero[]>(URL).pipe(
            tap(_ => this.log(`found heroes matching ${term}`)),
            catchError(this.handleError<Hero[]>('search heroes', []))
        );
    }

【防抖】详见英雄案例

<li *ngFor="let hero of heroes$ | async"></li>

import { Observable, Subject } from 'rxjs';
export class HeroSearchComponent implements OnInit {
    heroes$: Observable<Hero[]>;
    private searchTerms = new Subject<string>();
    // Push a search term into the observable stream.
    this.searchTerms.next(term);
  ngOnInit() {
        this.heroes$ = this.searchTerms.pipe(
    // ...
    );
  }
}

Zone

this.zone.run(() => this.materials = this.materials);  // 图档group-search

perfect-scroll-bar

• 下拉触底

• 手动/自动滚动

  scroll滚动

• 下拉懒加载

• rxjs方式