javascript - jssor slider 响应 Angular 2

Question

我已关注this answer在 Angular2 中添加 jssor。我已将以下 javascript 代码添加到文件中并在 angular-cli.json 中调用。

jssor_1_slider_init = function() {

        var jssor_1_options = {
          $AutoPlay: true,
          $AutoPlaySteps: 4,
          $SlideDuration: 160,
          $SlideWidth: 200,
          $SlideSpacing: 3,
          $Cols: 4,
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $Steps: 1
          },
          $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$,
            $SpacingX: 1,
            $SpacingY: 1
          }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 809);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
    };

我观察到 ScaleSlider() 函数用于缩放 slider ，但它没有调用。

如何使其在 Angular 2 中响应？

Answer 1

/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
    var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
    if (refSize) {
        refSize = Math.min(refSize, 809);
        jssor_1_slider.$ScaleWidth(refSize);
    }
    else {
        window.setTimeout(ScaleSlider, 30);
    }
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/