Wie kann ich eine Angular2-Komponente einer Zeichenfolge rendern?

Question

Ich möchte in der Lage sein, die Angular2-Vorlagensyntax beim Erstellen eines Google Maps InfoWindow zu verwenden.

Soweit ich das beurteilen kann, bedeutet dies, eine a-Komponente als Vorlage Zeichenfolge an die content-Eigenschaft im InfoWindow Konstruktor Objekt übergeben.

Wenn dies der Fall ist, glaube ich, dass ich die Komponentenvorlage stringieren muss. Ist das richtig (und möglich)?

Hier ist ein Beispiel dafür, was ich denke,ich tun muss:

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

Versuchen Sie, die ElementRef angular.io/docs/ts/latest/api/core/ElementRef-class.html vorbei.

Oder etwas mit ViewChild:

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

Ich werde den Code für Sie nicht schreiben, aber die Idee ist so etwas wie dieses:

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