angular9的學習(十)

ng-template的妙用

這個的主要是antd 表格的詳情運用

<ng-template ngFor let-item [ngForOf]="items" let-i="index">
   {{item}} --{{i}}
</ng-template>

angular9的一種自動取消訂閱

@UntilDestroy()
@Component(...)
export class MyComponent implements OnInit {
  ...
  public ngOnInit() {
    this.userService.getUser()
      .pipe(untilDestroyed(this))
      .subscribe();
  }
  // 不須要ngOnDestroy也能夠 版本Angular 9+ !
}

github地址

https://github.com/ngneat/until-destroy

組件傳值的細節

export class SelectComponent {
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() placement: 'top' | 'bottom' | 'right' | 'left'  = 'bottom'
}

默認的時候是'md'  'bottom'

訂閱不一樣的值

訂閱相同的值
 let a=of(Math.random())
    a.subscribe(res=>{
      console.log(res);
    })
    a.subscribe(res=>{
      console.log(res);
    })

訂閱不一樣的值
 let b= defer(() => of(Math.random()));
    b.subscribe(res=>{
      console.log(res);
    })
    b.subscribe(res=>{
      console.log(res);
    })

input拿值

<input type="text" #newtitle> <br>
<input type="text" #newlink> <br>
<button (click)="add(newtitle,newlink)">點我</button>

add(a: HTMLInputElement, b: HTMLInputElement) {
    console.log(a.value, b);
  }

給組件自己添加class

:host.root123{
  background-color: red;
}

  @HostBinding('attr.class') cssClass = 'root123';

發現一種有趣的設計模式

article.model.ts

export class Article {
  title: string;
  link: string;
  votes: number;

  constructor(title: string, link: string, votes?: number) {
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }

  voteUp(): void {
    this.votes += 1;
  }

  voteDown(): void {
    this.votes -= 1;
  }

}

組件

import {Component, HostBinding, OnInit} from '@angular/core';
import {Article} from './article.model';

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {
  article: Article;

  constructor() {
    this.article = new Article('sss', 'bbb', 10);
  }

  add(): void {
    this.article.voteUp();
  }

  plus(): void {
    this.article.voteDown();
  }
  ngOnInit(): void {
  }

}

html

<h1>{{article.votes}}</h1>
<h1>{{article.link}}</h1>
<h1>{{article.title}}</h1>
<button (click)="add()">++</button>
<button (click)="plus()">--</button>

細節修改

<h1>{{article[0].votes}}</h1>
<h1>{{article[0].link}}</h1>
<h1>{{article[0].title}}</h1>
<h1>{{article[1].votes}}</h1>
<button (click)="add()">++</button>
<button (click)="plus()">--</button>

=======================
 article: Article[];

  constructor() {
    this.article = [
      new Article('aaa', 'bbb', 10),
      new Article('ccc', 'ddd', 13),
      new Article('eee', 'fff', 13),
    ];
  }

  add(): void {
    this.article[0].voteUp();
  }

  plus(): void {
    this.article[0].voteDown();
    this.article[0].voteDown();
  }

這樣添加組件也不錯

<app-two *ngFor="let item of [1,2,3]" [one]="item"></app-two>

Arrray

string<Array>
string[]
Array<string>
number[]

ngSwitch

public list: string = 'c';

<div class="container" [ngSwitch]="list">
  <div *ngSwitchCase="'a'">A</div>
  <div *ngSwitchCase="'b'">B</div>
  <div *ngSwitchCase="'c'">C</div>
  <div *ngSwitchDefault>default</div>
</div>

解除訂閱

export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy {
  public subscriptions: Subscription[] = [];
  public everySecondOne: Observable<number> = of(1);
  public everySecondTwo: Observable<number> = of(2);

  ngOnInit(): void {
    this.subscriptions.push(this.everySecondOne.subscribe(res => {
      console.log(res);
    }));
    this.subscriptions.push(this.everySecondTwo.subscribe(res => {
      console.log(res);
    }))
  }

  ngOnDestroy() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

不過仍是建議使用下面的這種

export class ComponentOneComponent implements OnInit, OnDestroy {
  public subscriptions: Subscription = new Subscription();
  public everySecondOne: Observable<number> = of(1);
  public everySecondTwo: Observable<number> = of(2);

  ngOnInit(): void {
    this.subscriptions.add(this.everySecondOne.subscribe(res => {
      console.log(res);
    }));
    this.subscriptions.add(this.everySecondTwo.subscribe(res => {
      console.log(res);
    }))
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe()
  }
}

第三種方式

export class ComponentOneComponent implements OnInit, OnDestroy {
  public subscriptions: Subject<boolean> = new Subject<boolean>();
  public everySecondOne: Observable<number> = of(1);
  public everySecondTwo: Observable<number> = of(2);

  ngOnInit(): void {
    this.everySecondOne.pipe(
      takeUntil(this.subscriptions)
    ).subscribe(res => {
      console.log(res);
    });
    this.everySecondTwo.pipe(
      takeUntil(this.subscriptions)
    ).subscribe(res => {
      console.log(res);
    })
  }

  ngOnDestroy() {
    this.subscriptions.next(true);
    this.subscriptions.unsubscribe();
  }
}