angular8 日常开发避坑指南

1.else使用

• 语法糖else

   <div *ngIf="isLoggedIn; else loggedOut">
   Welcome back, friend.
   </div>

   <ng-template #loggedOut>
   Please friend, login.
   </ng-template>
   	````

* code 等同于下方

<ng-template [ngIf]=“isLoggedIn” [ngIfElse]=“loggedOut”>
Welcome back, friend.

<ng-template #loggedOut>
Please friend, login.

* 在高级一点

<ng-container *ngIf=“isLoggedIn;then loggedIn;loggedOut”>

<ng-template #loggedIn>
Welcome back, friend.

<ng-template #loggedOut>
Please friend, login.

#### 2.ng-show废弃

3.angular中使用angularjs组件

• angularjs组件

  export const heroDetail = {
  bindings: {
    hero: '<',
    deleted: '&'
  },
  template: `
    <h2>{
  {$ctrl.hero.name}} details!</h2>
    <div><label>id: </label>{
  {$ctrl.hero.id}}</div>
    <button ng-click="$ctrl.onDelete()">Delete</button>
  `,
  controller: function() {
    this.onDelete = () => {
      this.deleted(this.hero);
    };
  }
};

• 定义angular指令

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import { Hero } from '../hero';
@Directive({
  selector: 'hero-detail'
})
export class HeroDetailDirective extends UpgradeComponent { 
 # 需要对应于angularjs组件定义的数据绑定
  @Input() hero: Hero;
  @Output() deleted: EventEmitter<Hero>;
  constructor(elementRef: ElementRef, injector: Injector) {
    super('heroDetail', elementRef, injector);
  }
} 

• 使用指令，引用angularjs组件

import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
  selector: 'my-container',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-detail [hero]="hero"
                 (deleted)="heroDeleted($event)">
    </hero-detail>
  `
})
export class ContainerComponent {
  hero = new Hero(1, 'Windstorm');
  heroDeleted(hero: Hero) {
    hero.name = 'Ex-' + hero.name;
  }
}

4.常用模板语法

• 结构指令：

  • 列表渲染

  <li *ngFor="let hero of heroes;">
      {
      { hero }}
  </li>
  

  • 列表渲染并展示序号

    <li *ngFor="let hero of heroes;let i = index;">
       {
      {i+1}} {
      { hero }}
   </li>
  

  推荐添加trackBy，提升性能

   <li *ngFor="let hero of heroes;trackBy:trackByFn">
      {
      { hero }}
  </li>
  trackByFn(index, item) {
   return item.id;
  }
  

• 条件渲染

  <li *ngIf="isHidden">
      {
      { hero }}
  </li>
  

• 条件选择

  <div [ngSwitch]="hero?.emotion">
    <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
    <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
    <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
    <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
  </div>
  

• 属性指令：

  • 数据单向输入

   # 动态绑定，更新会触发对应子组件
   <app-hero-detail [hero]="currentHero"></app-hero-detail>
   
   # 绑定字符串，非变量值
   <app-item-detail childItem="parentItem"></app-item-detail>
  

  • 事件反馈

   <w-button (click)="handlerClick" />
   
   # 双向数据绑定
   <input [(ngModel)]="currentItem.name">
  
   # 等效于
   <input [value]="currentItem.name"
      (input)="currentItem.name=$event.target.value" >
  

  • 属性添加

  <button [attr.aria-label]="help">help</button>
  
  <div [class.special]="isSpecial">Special</div>
  
  <button [style.color]="isSpecial ? 'red' : 'green'">
  
  <button [class]="{foo: true, bar: false}" />
  

  • 自定义双向数据绑定 - x和xChange

   import { Component, Input, Output, EventEmitter } from '@angular/core';
   @Component({
      selector: 'app-