如何将Crafter CMS内联编辑与Angular 2集成

Question

我已经成功地遵循了本博客的教程，并想知道我是否可以通过在Angular 2项目中启用Crafter CMS的内联编辑来进一步扩展它。我的第一个尝试是将此代码<@studio.iceAttr iceGroup="author"/>包括在Angular组件模板中，如下所示：

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

但是角编译器坚持认为它是无效的HTML。我知道，在Hood Crafter Studio下，将上述代码转换为实际的HTML。因此，我认为我应该在角组件的模板中添加产生的HTML，但似乎也存在生成的值。还有其他方法可以在CMM内部使用Angular 2应用程序进行内联编辑？

Answer 1

首先，＆lt;@studio.iceattr scigroup =" rution"/>是服务器端标签。Angular绝对不会识别它。我认为您需要将其移至一个简单的API中，该API可以返回Inline CSS内容。然后使用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;
    });
}

在您的模板中：

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