如何在 Angular2 中调用 Polymer 元素方法？

Question

我正在使用 Angular2 和 Polymer（我知道 Angular 目前是 alpha 版）。

主要目标：

使用 Angular2 和 Polymer 构建一个小应用程序，显示我在 Gmap 中的当前位置。

当前的 BabyStep

使用setInterval 在 ViewModel/Component 中移动坐标。

问题

我尝试在 Angular 视图中使用 Gmap element from Polymer。 绑定工作完美，但地图不刷新。我读到，我必须从google-map element API 调用refresh() 方法。 这让我想到了以下几点：

@Component({
    selector: 'my-app',
})
@View({
    templateUrl: '/templates/map.html'
})
export class MapComponent {
    lat: number;
    lng: number;

    constructor() {
        this.lat = 27.859862;
        this.lng = 13.112473;
        this.goToleft();
    }

    goToleft() {
        setInterval(() => {
            this.lng -= 0.00001;
            document.querySelector("#gmap").resize();
        }, 100)
    }
}

map.html:

<link rel="import" href="../bower_components/google-map/google-map.html" >
<link rel="import" href="../bower_components/google-map/google-map-marker.html" >
[...]
<google-map id="gmap" show-center-marker libraries="places" latitude="{{lat}}" longitude="{{lng}}" disable-zoom fit-to-markers disable-default-ui zoom="18" >
    <google-map-marker longitude="{{lng}}" latitude="{{lat}}" id="google_map_marker" title="Go Giants!" draggable="true">    </google-map-marker>
</google-map>

说实话：document.querySelector("#gmap").resize(); 很脏。在我的理解中，Angular2 中的组件像 ViewModel 一样工作，有点像 Angular1 中的控制器。因此 ViewModel 不应该直接访问 DOM 元素。但我还没有更好的解决方案。

我尝试使用ElementRef injection，但它不再支持。

谁能给我一个提示？我觉得，好像我错过了什么。

Answer 1

我正在使用 Angular2 alpha 46 并具有以下构造函数，可将 ElementRef 注入到组件中。我同意你的看法，这似乎不是最好的解决方案，但我还没有看到任何其他方法。

constructor( 
  @Inject(ElementRef) elementRef: ElementRef
) {
  this.map = elementRef.nativeElement.querySelector("XXX");
  this.refreshMap = this.map.refresh;
}