Angular 4 观察两种方式绑定属性的变化

Question

我创建了一个 toggle-sorting 组件，它检查当前排序参数是否匹配它的排序 slug，并处理单击以输出更改

// toggle-sorting.component.ts

@Input() sortingSlug: string;
@Input() currSorting: string;
@Output() currSortingChange: EventEmitter<string> = new EventEmitter<string>();

@HostBinding('class.sorting-asc') activeAsc: boolean;
@HostBinding('class.sorting-desc') activeDesc: boolean;

/**
 * Watch sorting params changes and update binding
 */
ngOnChanges() {
    this.activeDesc = this.currSorting === this.sortingSlug;
    this.activeAsc = this.currSorting === '-' + this.sortingSlug;
}

/**
 * Watch click event to set sorting
 */
@HostListener('click') setSorting() {
    if (this.activeDesc) {
        this.currSortingChange.emit('-' + this.sortingSlug);
    } else {
        this.currSortingChange.emit(this.sortingSlug);
    }
}

我以这种方式使用它作为我的父组件

// parent.component.html

// ... some layout
<th>
    <span toggle-sorting [(currSorting)]="sorting" sortingSlug="version">Scraper</span>
</th>
<th>
    <span toggle-sorting [(currSorting)]="sorting" sortingSlug="sites_count">Sites Scraped</span>
</th>
<th>
    <span toggle-sorting [(currSorting)]="sorting" sortingSlug="success_rate">Success rate</span>
</th>
// ... some layout

我的父组件中有全局sorting 属性，它控制实际的排序参数，这是绑定到toggle-sorting 子项的两种方式

// parent.component.ts

sorting: string = 'version';

每次全局排序参数更改时我都需要触发 api 调用，但我不能用ngOnChanges 观看它，因为它不是@Input，我也不想在这里使用ngDoCheck（性能方面），我不想在toggle-sorting 中使用单独的@Input 和@Output（但肯定会为我的目的工作）。

对我来说最好的选择是什么？

Answer 1

有几种方法可以做到这一点。

1 .使用完整的ngModel 格式：

  (ngModelChange)="onSortChanged($event)" [ngModel]="sorting"

  public onSortChanged(value:string):void
  {
     const changed = this._sorting !== value;
     this._sorting = value;
     if(changed) {
       //... do smth
     }
  }

2 。使用get/set:

private _sorting:string;

public get sorting():string
{
    return this._sorting;
}

public set sorting(value:string)
{
    const changed = this._sorting !== value;
    this._sorting = value;
    if(changed) {
       this.onSortingChanged();
    }
}