如何將Angular2組件渲染為字符串？

Question

我希望能夠在構建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 ^ */
    });
}

Answer 1

嘗試傳遞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
    }
}