在内部函数中使用公共变量

时间:2018-08-24 12:17:34

标签: javascript angular typescript scope angular6

我有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.isOverviewVisiblethis.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();
  }
});

2 个答案:

答案 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;
      }
      ...
    }
});