Crafter CMS 인라인 편집을 각도 2로 통합하는 방법은 무엇입니까?

Question

this blog의 튜토리얼을 성공적으로 따라 왔으며 Angular 2 프로젝트에서 Crafter CMS의 인라인 편집을 활성화하여 추가로 확장 할 수 있는지 궁금합니다.

<h1 <@studio.iceAttr iceGroup="author"/>>${title}</h1> 

을하지만, 각 컴파일러가 잘못된 HTML이라고 주장 : 내 첫 번째 시도는 다음과 같이 각 구성 요소의 템플릿이 코드 <@studio.iceAttr iceGroup="author"/>을 포함하는 것이었다. Crafter 스튜디오에서는 위의 코드를 실제 HTML로 변환합니다. 따라서, 나는 대신 앵글 구성 요소의 템플릿에 생성 된 html을 추가해야한다고 생각하지만 생성 된 값도있는 것처럼 보입니다. Crafter CMS에서 앵귤러 2 앱을 인라인 편집 할 수있는 다른 방법이 있습니까?

Answer 1

먼저, < @ studio.iceAttr iceGroup = "author"/>는 서버 측 태그입니다. 각도는 확실히 그것을 인식하지 못합니다. 인라인 CSS 콘텐츠를 반환 할 수있는 간단한 API로 옮겨야한다고 생각합니다. 그런 다음 ngStyle을 사용하여 각도 템플릿에 바인딩합니다. 템플릿에서

cmsInlineCss: any; 

ngOnInit(private http: Http) { 
    this.http.get('api/cmsinlinecss/{para}').map(res => { 
     var css = res.json(); 
     var processedCss = ''; 

     // process css to JSON object string 

     this.cmsInlineCss = processedCss; 
    }); 
} 

: 코드의 component.ts에서

내 코드 가정, 여기

<h1 [ngStyle]="cmsInlineCss">${title}</h1>