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这里使用（性能方面），并且我不想使用单独的@Input和@Output在toggle-sorting(但可以肯定它会为我的目的工作）。

在我的情况下，最好的选择是什么？

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();
    }
}