Làm cách nào để kết xuất thành phần Angular2 thành chuỗi?

Question

Tôi muốn có thể sử dụng cú pháp mẫu Angular2 khi xây dựng một Google Maps InfoWindow.

Theo như tôi có thể biết, điều này có nghĩa là chuyển một thành phần dưới dạng chuỗi mẫu đến thuộc tính content trong đối tượng hàm tạo InfoWindow.

Nếu đúng như vậy, tôi tin rằng tôi cần phải định cỡ mẫu thành phần. Điều này có đúng không (và có thể)?

Dưới đây là một ví dụ về những gì tôi nghĩ tôi cần phải làm:

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

Hãy thử đi qua các ElementRef angular.io/docs/ts/latest/api/core/ElementRef-class.html.

Hoặc một cái gì đó với ViewChild:

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

Tôi sẽ không viết mã cho bạn, nhưng ý tưởng là một cái gì đó như thế này:

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