2016-01-13 2 views
5

Я хотел был бы иметь возможность использовать синтаксис шаблона Angular2 при построении Google Maps InfoWindow.Как преобразовать компонент Angular2 в строку?

Насколько я могу судить, это означает передачу компонента в качестве строки шаблона в свойство content в объекте-конструкторе InfoWindow.

Если это так, я считаю, что мне нужно подкрепить шаблон компонента. Это правильно (и возможно)?

Вот пример того, что я думаю, что мне нужно сделать:

// 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^*/ 
    }); 
} 
+0

Посмотрите на 'ElementRef': HTTPS : //angular.io/docs/ts/latest/api/core/ElementRef-class.html или 'ViewChild': https://angular.io/docs/ts/latest/api/core/ViewChild-var.html – Langley

+0

Я не вижу смысла создавать угловой компонент, а затем строгую его, чтобы передать его в infowindo ш. Почему бы вам просто не передать строку. Это потому, что вы хотите использовать привязку данных? В любом случае это не будет обновляться после передачи его в infowindow. –

+1

@ GünterZöchbauer - право, мне не нужна привязка данных - шаблон sytax просто кажется намного приятнее, чем ужасный строкоукладчик. (особенно для 'ngIf' и' ngFor'). Имеет ли это смысл? – drewwyatt

ответ

2

Попробуйте пропусканием 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 
    } 
} 
+0

Извините, но это непонятно. Как добавить скомпилированный HTML из свойства viewChild компонента в google.maps.InfoWindow content: string? –

Смежные вопросы