Question

我想改变窗口焦点上的标尺值。在这里我创建了一个可以使窗口聚焦的功能。我创建了服务 - ＆＃34; WindowRef.ts＆＃34;窗口和gvae依赖于我的组件，但我为窗口创建的引用无法访问我在component.ts文件中定义的对象属性。 WindowRef.ts：

import {Injectable} from '@angular/core';
function _window(): any {
  // return the native window obj
  return window;
}

@Injectable()
export class WindowRef {

  get nativeWindow(): any {
    return _window();
  }

}

appComponent：

export class AppComponent {
  //Creating the reference for the slider and reference for detect changes after destroying the slider

  @ViewChild('slider', { read: ElementRef }) sliderEl: ElementRef;
  @ViewChild('slider') slider;

  timeInterval = [0, 15];
  window: any
  flag: boolean = true;
  step = 1;
  connectArray = [false, true, false];
  tooltips = [true, true];
  videoDuration: any = 50;
  Duration: any = 0;
  /**
   * Key values for the slider on creation and recreation 
   */
  keyConfig: any = {
    behaviour: 'drag',
    connect: this.connectArray,
    step: 1,
    tooltips: [true, true],                       // dynamic array for tooltip which will be updated in addInterval()
    margin: 0,
    range: {
      min: 0,
      max: this.videoDuration
    },
    pips: {
      mode: 'count',
      density: 3,
      values: 5,
      stepped: true
    }
  }
 // Constructor for intialising the time interval and running the js for the strating the after effects. 
      constructor(public cdRef: ChangeDetectorRef, public winRef: WindowRef) {
        //console.log('Window object', winRef.nativeWindow);
        this.window = winRef.nativeWindow;
        this.window.addEventListener('focus', this.focusFunction);
        try {
          initialiseJS();
        } catch (e) {
        }
      }

focusFunction() {                // Focus function is not working but console showing the focus out on debugging
    debugger;
    getVideoDuration(resp => {
      this.videoDuration = resp;
      console.log(this.keyConfig);
      this.keyConfig.range.max = this.videoDuration;
      this.slider.slider.destroy();
      this.flag = false;
      this.cdRef.detectChanges();
      this.flag = true;
    });
  }

＆＃39;这＆＃39;无法找到keyConfig属性，从而显示错误＆＃34;无法找到未定义的范围＆＃34;。任何人都可以帮助我

Answer 1

你需要将你的Windows定义放在typings.d.ts中，然后它会在为我工作时起作用

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
  id: string;
}
interface Window { my: any; }

并在component.ts中这样做

     //below script helps to expose anglar function to javascript 
     window.my = window.my || {};
     window.my.namespace = window.my.namespace || {};
     window.my.namespace.publicFunc = this.OnTableButtonClick.bind(this);

OnTableButtonClick是角度函数。

从html你可以这样做

<input type='button' onclick='my.namespace.publicFunc(1);'
 value='Click me'/>

Answer 2

简短回答是

写this.window.addEventListener('focus', this.focusFunction.bind(this)); 取代this.window.addEventListener('focus', this.focusFunction);

Answer 3

有两种方法：

1方法：

使用组件的host属性将焦点应用于组件的所有元素：

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:blur)': 'focusOutFunction($event)',
    '(window:focus)': 'focusInFunction($event)',
  }
})

并在调用focusOutFunction时从回调中获取视频持续时间，并在调用focusInFunction时设置duartion。这将访问keyConfig对象，并且还可以访问其所有的属性和范围prpoerty。

2方法是：

使用http://benalman.com/news/2010/11/immediately-invoked-function-expression/而不是使用host属性我们可以简单地在函数中发送参数，在内部函数中可以使用focusOutFunction。请参阅：

this.window = winRef.nativeWindow;
    this.window.addEventListener('focus',((e)=>{
      return ()=>e.focusInFunction.call(e);
    })(this));

这将为窗口创建实例以访问组件属性，并可用于执行操作。

使用角度2中的窗口参考无法访问组件的属性

3 个答案: