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

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 属性，它控制实际的排序参数，它通过两种方式绑定(bind)到 toggle-sorting children

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