如何在 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 元素。但是我还没有更好的解决方案。

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

有人可以给我提示吗？我觉得，好像错过了什么。

Answer 1

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

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

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

How to call Polymer element methods in Angular2?

javascript

jquery

google-maps

polymer-1.0

angular