访问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"];}

但是这个房间未定义

如何访问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定义的变量。

如果要定义全局变量，则必须将其放在窗口对象中：

<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;
}