2017-10-10 40 views
10

Tôi cần phải cung cấp một chuỗi HTML vững chắc cho bản đồ baloon của cơ quan đánh dấu bản đồ của tôi.
Tôi muốn làm cho baloon thành phần Góc và sử dụng các ràng buộc và chỉ thị tích hợp (*ngFor, *ngIf, v.v ...). Vì vậy, Im tìm kiếm một cách để đánh giá tất cả các ràng buộc trong mẫu thành phần và kết quả biên dịch thành một chuỗi ...
Làm thế nào để đạt được điều này hoặc nếu phương pháp này không phải là góc cạnh - mô hình có thể là gì?Biên dịch thành phần góc thành HTML với các liên kết

// Component 

import {Component} from '@angular2/core'; 
import {AnyThing} from './somewhere/in/my/app/anything.model.ts'; 

@Component({ 
    selector: 'my-baloon-window', 
    template: `<p>This is a baloon for {{ any.name }}</p>` 
}) 
export class MyBaloonWindowComponent { 
    constructor(public something: AnyThing) {} 
} 


// Implementation 

import {AnyThing} from './somewhere/in/my/app/anything.model.ts'; 
import {MyBaloonWindowComponent} from './path/to/baloon-window.component'; 

/* { ...some code here... } */ 

private createBaloonWindow(thing: AnyThing): google.maps.InfoWindow { 
    return new ymap.map.BaloonWindow({ 
     /* I want something like this */ 
     content: new MyBaloonWindowComponent(thing).toString() 
     /*^this is what I want^*/ 
    }); 
} 
+0

Tôi đã xem xét vấn đề này gần đây và tôi không nghĩ có bất kỳ điều gì hiện đang phơi bày điều này. Chúng tôi đã kết thúc bằng cách viết chức năng của riêng mình bằng cách sử dụng các chuỗi mẫu nhiều dòng, thay vì cú pháp mẫu Góc. – jonrsharpe

+0

Im điều tra điều này một lúc và có một số gợi ý rằng nó có thể có thể bằng cách sử dụng một số kỹ thuật như elementRef, hoặc/và ReflectiveInjector, Rendered vv ... Vẫn hy vọng tìm được một giải pháp vững chắc và đẹp cho điều này :) –

+4

' từ '@ angular2/core'; 'Bạn có vẻ đang đùa – yurzui

Trả lời

2

Tôi ngạc nhiên khi không ai đề xuất sử dụng Angular Universal - có, ít nhất là phiên bản tương thích 2.0, nó hiển thị toàn bộ tài liệu, nhưng bạn có thể tải thành phần riêng lẻ của mình vào một trang, hiển thị thành html chuỗi với góc phổ quát, và sau đó loại bỏ các <html> thẻ, vv

https://github.com/angular/universal

góc phổ được thiết kế để render HTML ở phía máy chủ, đó là cơ bản về lộ công cụ rendering mã mà không cần dựa trên DOM .

Cũng đáng chú ý, nếu bạn muốn truy cập vào Renderer hoặc RootRenderer trực tiếp trong góc 4, bạn sẽ phải tạo ra một trường hợp mới sử dụng RendererFactory - nhưng cả hai được tiếp xúc trực tiếp trong góc 2

https://jaxenter.com/angular-4-top-features-133165.html

1

Bạn có thể thử để làm cho MyBaloonWindowComponent vào div ẩn và sau đó sử dụng chậm trễ ví dụ setTimeout(..., 0) hoặc lịch cao cấp hơn, dịch vụ trợ giúp hoặc sự kiện tùy chỉnh nhận kết quả html từ tiêm ElementRef.

Có thể tạo thành phần đặc biệt (như NgComponentOutlet) + dịch vụ sẽ thực hiện hiển thị và sau đó phát ra kết quả html thành mã máy khách.

Các vấn đề liên quan