Come posso eseguire il rendering di un componente Angular2 su una stringa?

Question

Vorrei poter utilizzare la sintassi del modello Angular2 durante la creazione di Google Maps InfoWindow.

Per quanto posso dire, questo significa passare un componente come stringa di modello alla proprietà content nell'oggetto di costruzione InfoWindow.

Se questo è il caso, credo di aver bisogno di stringificare il template del componente. È corretto (e possibile)?

Ecco un esempio di quello che penso ho bisogno di fare:

// 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

Prova a passare il ElementRef angular.io/docs/ts/latest/api/core/ElementRef-class.html.

o qualcosa con ViewChild:

https://angular.io/docs/ts/latest/api/core/ViewChild-var.html

non voglio scrivere il codice per voi, ma l'idea è qualcosa di simile:

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