我希望在构建 Google Maps InfoWindow 时能够使用 Angular2 模板语法.
据我所知,这意味着将组件作为模板字符串传递给 InfoWindow
构造函数对象中的 content
属性。
如果是这种情况,我认为我需要对组件模板进行字符串化。这是正确的(并且可能的)吗?
这是我认为我需要做的事情的一个例子:
// Component
import {Component} from 'angular2/core';
import {Thing} from './something/in/my/app/thing.model.ts';
@Component({
selector: 'my-infowindow',
template: `<p>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
constructor(public something: Thing) {}
}
// Implementation
import {Thing} from './something/in/my/app/thing.model.ts';
import {MyInfoWindowComponent} from './path/to/infowindow.component';
/* { ...stuff... } */
private _buildInfoWindow(thing: Thing): google.maps.InfoWindow {
return new google.maps.InfoWindow({
/* v this is what I want v */
content: new MyInfoWindowComponent(thing).toString()
/* ^ this is what I want ^ */
});
}
最佳答案
尝试传递 ElementRef
angular.io/docs/ts/latest/api/core/ElementRef-class.html。
或者使用 ViewChild
的东西:
https://angular.io/docs/ts/latest/api/core/ViewChild-var.html
我不会为你写代码,但我的想法是这样的:
@Component({
selector: 'my-infowindow',
template: `<p #kiddo>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
@ViewChild('kiddo') viewChild;
constructor(public something: Thing) {}
ngOnInit(){
yourFunction(this.viewChild); //or viewChild.innerHtml or w/e works
}
}
关于angular - 如何将 Angular2 组件渲染为字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34772889/