Angular2 Google Maps样式仅在使用嵌入式“样式”参数时更改

Question

如果不将所有样式都粘贴到HTML代码（即内联样式）内部，就无法更改地图的样式。

这样我就能正确获得所需的样式

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="true" [zoom]="zoom" [fullscreenControl]="true"
[styles]='
    [
        {
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#1d2c4d"
                }
            ]
        },
        {
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#8ec3b9"
                }
            ]
        }
    ]'>
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>

但是这样根本不起作用

HTML：

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="true" [zoom]="zoom" [fullscreenControl]="true" [styles]="styles">
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>

TS：

ngOnInit() {

    let styles = [
        {
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#1d2c4d"
                }
            ]
        },
        {
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#8ec3b9"
                }
            ]
        }
    ];
}

我的猜测是，在地图渲染时不会加载该变量，但是我找不到在哪里声明它可以工作。