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

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

1 个答案: