访问index.html中定义的变量

Question

在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文件的某些组件中使用此Darkroom

我尝试

var declare Darkroom: any;

和在

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

但是this.darkroom是不确定的

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

Answer 1

更改脚本以直接设置window字段

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

Answer 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>

Answer 3

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

index.html

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

component.ts

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