Android 滑块和带手指滑块的NGM模型

我遇到了滑块组件的性能问题

<StackLayout>
  <Label text="time {{time}} minutes"></Label>
  <Slider minValue=1  maxValue=120 [(ngModel)]="time"></Slider>
</StackLayout>

当我在我的模拟器和设备（Nexus 5x）上运行它时，滑块数在我使用它时滞后。我必须比平时慢一点，才能用手指的位置更新号码

有没有更好的方法来实现这种滑块，使数字与我的手指在任何速度下滑动时的位置相匹配，并且没有延迟

---

此gif来自上述代码并显示滞后

我做了一些研究，发现处理这个延迟的一个可能的解决方案是手动更新标签的文本属性。您可以为滑块定义

onchange

方法并处理其值的更改

关于这一点，您可以在下面查看我的示例代码：

import {Component} from "@angular/core"; 
import {CustomComponent} from "./custom.component"

@Component({
    selector: "my-app",
    directives:[CustomComponent],
    template: `
<StackLayout style="background-color: green;" >

    <Label [text]="time + 'minutes'"></Label>
        <Slider #sl minValue=1  maxValue=120 [value]="time" (valueChange)="onchange(sl.value)"></Slider>
    </StackLayout>
`,
})
export class AppComponent {
    public time:number=30;

    public onchange(newtime){
        this.time=newtime;
    }
}

从“@angular/core”导入{Component}；
从“/custom.component”导入{CustomComponent}
@组成部分({
选择器：“我的应用程序”，
指令：[自定义组件]，
模板：`
`,
})
导出类AppComponent{
公共时间：数字=30；
公共onchange（新时间）{
时间=新时间；
}
}

可能是下一次角度更新中应该包含的。您可以尝试设置

ChangeDetectionStrategy.OnPush

。