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