我有2个slide toggles,我可以在其中使用split.js显示面板的状态。
我要实现的目标是,当我打开/关闭面板时,必须将幻灯片切换的属性checked
设置为true / false。
我的组件中有2个公共变量:
public isOverviewVisible: boolean = true;
public isDetailsVisible: boolean = false
我在html文件中使用的
<div class="col-auto align-self-end">
<mat-slide-toggle ngDefaultControl (change)="showOverviewChange($event)" [checked]="isOverviewVisible">
Show overview
</mat-slide-toggle>
</div>
...
在组件的构造函数中,我想通过split.js呈现的函数onDragEnd
设置2个公共变量。当我拖动拆分器时,调试器将进入此方法,但是变量this.isOverviewVisible
和this.isDetailsVisible
不是我在组件顶部声明为public的变量。
let split = Split(['#overview', '#detail'], {
onDragEnd: function () {
let sizes: number[] = split.getSizes();
if (sizes[0] < 1) {
this.isOverviewVisible = false;
} else {
this.isOverviewVisible = true;
}
...
}
});
问题是,如何在函数onDragEnd
中设置我的公共变量?
还是有更好的方法?
更新
我将代码更改为使用箭头功能,但是现在split.getSizes()
上出现错误:类型'()=> any'上不存在属性'getSizes'。
let split = () => Split(['#overview', '#detail'], {
sizes: [50, 50],
minSize: [0, 0],
direction: 'vertical',
onDragEnd: function () {
let sizes: number[] = split.getSizes();
}
});
答案 0 :(得分:1)
尝试:
let split = () => Split(['#overview', '#detail'], {
onDragEnd: () => {
let sizes: number[] = split.getSizes();
if (sizes[0] < 1) {
this.isOverviewVisible = false;
} else {
this.isOverviewVisible = true;
}
...
}
});
答案 1 :(得分:1)
您需要在onDragEnd
函数中使用箭头函数,以使this
是类实例:
let split = Split(['#overview', '#detail'], {
onDragEnd: () => {
let sizes: number[] = split.getSizes();
if (sizes[0] < 1) {
this.isOverviewVisible = false;
} else {
this.isOverviewVisible = true;
}
...
}
});