2017-10-10 2 views
10

내지도 마커 baloon body에 단색 HTML 문자열을 제공해야합니다.
저는 baloon을 Angular 구성 요소로 만들고 바인딩과 내장 지시문 (*ngFor, *ngIf 등)을 사용하려고합니다. 그래서 구성 요소 템플릿의 모든 바인딩을 평가하고 결과를 문자열로 컴파일하는 방법을 찾고 있습니다 ...
이 방법을 사용하거나이 방법이 비구 조형 인 경우 - 권장되는 패턴은 무엇입니까?바인딩을 사용하여 각도 구성 요소를 HTML로 컴파일

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

최근에이 문제를 조사한 결과, 현재이 문제를 드러내는 것이 없다고 생각합니다. 우리는 Angular 템플릿 구문 대신 다중 행 템플릿 문자열을 사용하여 자체 함수를 작성했습니다. – jonrsharpe

+0

잠시 동안 조사 중이며 elementRef,/및 ReflectiveInjector, Rendered 등과 같은 일부 기술을 사용하여 가능할 수 있다는 힌트가 있습니다. 아직 한 가지 견고하고 아름다운 솔루션을 찾기를 희망합니다. –

+4

' '@ angular2/core'에서 '당신은 농담하는 것 같습니다. – yurzui

답변

2

아무도 Angular Universal을 사용하여 제안한 것에 놀랐습니다. 예, 최소한 전체 문서를 렌더링 한 2.0 호환 버전에서 그렇습니다. 그러나 당신은 하나의 구성 요소를 페이지에로드하고 html로 렌더링 할 수 있습니다 다음 각 보편적하고와 문자열은 <html> 태그 등을 제거

https://github.com/angular/universal

각도 유니버설 DOM에 의존하지 않고 코드 렌더링 엔진 노출에 대한 근본적 서버 측에 HTML을 렌더링하도록 설계 . 또한 노트의

, 액세스하려는 경우 Renderer 직접 각도 4 RootRenderer, 당신은 RendererFactory 사용하여 새 인스턴스를 생성해야합니다 -하지만이 두 가지가 각도에 직접 노출 된 2

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

1

당신은 지연 즉 setTimeout(..., 0) 이상의 고급 예약, 도우미 서비스 또는 사용자 정의 이벤트가 주입 ElementRef에서 HTML을 결과로 받게을 사용하여 다음 숨겨진 DIV에 MyBaloonWindowComponent을 렌더링하기 위해 노력하고 있습니다.

렌더링을 수행 할 특수 구성 요소 (예 : NgComponentOutlet) + 서비스를 생성 한 다음 결과 HTML을 클라이언트 코드로 내보낼 수 있습니다.

관련 문제