angular2는 외부 HTML 템플릿을 포함합니다.

Question

외부 HTML 파일을 포함 할 수있는 방법이 있습니까? templateUrl을 사용할 수 없으므로 URL 시작 부분에 기준을 계속 추가합니다.

@Component({ 
    selector: 'enroll-header', 
    templateUrl: 'http://blank.blank.com/somecool.html' 
}) 

는 "./http://blank.blank.com/somecool.html"

에서 그것을 발견하려고

Answer 1

templateURL의 외부 URL 사용은 지원되지 않습니다 (보안 위험에 노출 될 가능성이 있기 때문일 수도 있음). 이 문제를 해결하기 위해 단일 변수에 바인딩하고 표시하는 구성 요소와 함께 템플릿을 사용할 수 있습니다. 그런 다음 변수를 렌더링 할 html과 동일하게 설정할 수 있습니다. 이 두 개의 유사한 SO 질문을 확인하십시오 :

• Dynamically load HTML template in angular2
• How to load external html page in ionic2

Answer 2

실패 나는 templateUrl의 모든 응용 프로그램의 루트를 기준으로 믿고, 그래서 나는이 작업을 것이라고 생각하지 않는 것 .

Answer 3

나는 새 HTML 파일을 얻을 수있는 스크랩 작업을 사용하여 종료 한 다음 서버 측 내 인덱스에 명령을 포함를 CH3OH. html 파일을 추가하십시오.

Answer 4

'@ angular/core'의 {Directive, ElementRef, Input, OnInit}을 가져 오십시오. '@ angular/http'의 {Headers, Http, Response}을 가져 오십시오.

@Directive가 ({선택 : 'ngInclude'}) 수출 클래스 NgIncludeDirective이하는 OnInit {

@Input('src') 
private templateUrl: string; 
@Input('type') 
private type: string; 

constructor(private element: ElementRef, private http: Http) { 

} 
parseTemplate(res: Response) { 
    if (this.type == 'template') { 
     this.element.nativeElement.innerHTML = res.text(); 
    } else if (this.type == 'style') { 
     var head = document.head || document.getElementsByTagName('head')[0]; 
     var style = document.createElement('style'); 
     style.type = 'text/css'; 
     style.appendChild(document.createTextNode(res.text())); 
     head.appendChild(style); 
    } 
} 
handleTempalteError(err) { 

} 
ngOnInit() { 
    this. 
     http. 
     get(this.templateUrl). 
     map(res => this.parseTemplate(res)). 
     catch(this.handleTempalteError.bind(this)).subscribe(res => { 
      console.log(res); 
     }); 
} 

}을 구현

당신은 [ComponentFactoryResolver]을 찾고 될 수