访问 index.html 中定义的变量答案

【问题标题】：Access to variable defined in index.html访问 index.html 中定义的变量
【发布时间】：2018-03-01 15:36:19
【问题描述】：

在 index.html 中我添加脚本并创建对象

       <script>
            let dkrm = new Darkroom('#ocrImg', {
                // Size options
                minWidth: 800,
                minHeight: 800,
                maxWidth: 1000,
                maxHeight: 900,
                ratio: 4/3,
                backgroundColor: '#fff',
            });
        </script>

但现在我尝试在 Angular ts 文件的某些组件中使用这个暗室

我试试

var declare Darkroom: any;

在

    ngOnInit() { this.darkroom = window["dkrm"];}

但是 this.darkroom 是未定义的

如何访问 index.html 中定义的变量并在 .ts 文件中使用这个变量？

【问题讨论】：

用var声明变量，而不是let。
在组件文件中：declare var dkrm: any;，然后在你的类中使用dkrm。

标签： javascript angular

【解决方案1】：

将脚本更改为直接设置window 字段

<script>
    window.dkrm = new Darkroom('#ocrImg', {
        // Size options
        minWidth: 800,
        minHeight: 800,
        maxWidth: 1000,
        maxHeight: 900,
        ratio: 4/3,
        backgroundColor: '#fff',
    });
</script>

【讨论】：

【解决方案2】：

您不能访问在脚本标记中使用 let 定义的变量。

如果要定义全局变量，必须放在window对象中：

<script>
        window.dkrm = new Darkroom('#ocrImg', {
            // Size options
            minWidth: 800,
            minHeight: 800,
            maxWidth: 1000,
            maxHeight: 900,
            ratio: 4/3,
            backgroundColor: '#fff',
        });
    </script>

【讨论】：

【解决方案3】：

将您的数据分配给窗口对象（例如 window.darkroom）并在下面的组件中访问它。

index.html

<script>
    window.darkroom = {};
</script>

组件.ts

darkroom: Object = {};
ngOnInit() {
    this.darkroom = window.darkroom;
}

【讨论】：

试试这个，我有错误属性'darkrom'不存在于类型'(this: Observable, windowBoundaries: Observable) => Observable >'