向组件发送与输入相同的数字时未触发更改检测

Question

这是我的场景：

我有一个配置了 OnPush 策略的组件，它逐页显示 PDF 文档，并允许用户滚动页面并导航到特定页面。它还公开了一个输入属性scrollToPage，它允许父级导航到某个页面。

@Component({
    selector: 'pdf-document',
    templateUrl: './pdf-document.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PdfDocumentComponent implements OnChanges {
    @Input() scrollToPage: number;
    
    ngOnChanges(changes: SimpleChanges) {
        if (changes.scrollToPage) {
            this.goToPage(this.scrollToPage);
        }
    }

    public goToPage(page: number) {
        ...
    }
}

一切都按预期工作，除了一种情况：

1. Parent 将 scrollToPage 输入设置为 2 号
2. ngOnChanges 触发并滚动到第 2 页
3. 用户导航到 PdfDocumentComponent 内的另一个页面（从视图调用 goToPage 函数）
4. 父级再次将scrollToPage 输入设置为数字2

在这种情况下，ngOnChanges 没有被触发，goToPage 函数也没有被调用，因为之前的 scrollToPage 的值是相同的，编号为 2。

要解决这个问题，我只能看到 3 个选项，但它们似乎都不合适，而且或多或少都是 hack：

1. 将输入类型更改为对象并始终发送新引用。 （我不喜欢这样，因为当我真的希望它发送一个简单的数字时发送一个对象没有意义）
2. 在父组件中使用@ViewChild 来获取对子组件的引用并从那里调用goToPage 函数。 （我不喜欢这样，因为我想尽可能清楚地保持组件与外部的合同 - 仅使用 @input 和 @output 属性。否则，我也必须记录这些公共函数。）
3. 将 OnPush 策略更改为默认。 （这实际上不是我的选择）

你们知道这个问题的任何其他解决方案吗？有没有更优雅的解决方法？

Answer 1

您可以KeyDown 活动。它在用户按键时执行。

<input type="text" (keydown)="onKeyDownEvent($event)" /> 

这里是您可以用于此目的的 JavaScript 中键盘事件的详细信息。 [1]：onKeyPress Vs. onKeyUp and onKeyDown