angular - Kentico 云 : problem adding angular html in richTextResolver

Question

我正在尝试在 kentico 云中的 RichTextField 中呈现一个结构。按照本教程 https://docs.kenticocloud.com/tutorials/develop-apps/get-content/dealing-with-structure-in-rich-text我制作了一个 ContentType 并用作我的 AngularLink 的模板(它有 2 个属性，文本和链接)，然后定义了一个 TypeResolver 并在 DeliveryClient 中注册

new DeliveryClient({
      projectId: 'xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',

      typeResolvers: [
        new TypeResolver('landing_page', () => new LandingPage()),
        new TypeResolver('angular_link', () => new AngularLink())
      ],
    });

AngularLink 类提供了一个 richTextResolver

export class AngularLink extends ContentItem {
  text: Fields.TextField;
  link: Fields.TextField;
  constructor() {
    super({

      richTextResolver: (item: AngularLink) => {
        return `<a routerLink="${item.link.value}">${item.text.value}</a>`;
      }
    });
  }
}

问题是，当我使用 RichTextField 中的 getHtml() 方法解析 html 时，BrowserRichTextParser 通过 innerHTML< 将返回的字符串插入元素中/em> 最终结果是 anchor 标记，其属性 routerlink 全部小写。

是否有更好的策略让 Angular 属性在 kentico-cloud-delivery api 的标准流程中工作？

非常感谢您!

Answer 1

这是个好问题，但解决起来并不容易。本质上，您面临的问题是，您从 getHtml 方法中获得的“只是”一个 string 并且当您通过 innerHtml 呈现它时将其视为 html，但它无法解析 html 中的指令/组件。

Angular 的 innerHtml 指令在未来可能可能会尝试实例化和解析指令/组件，但目前情况并非如此。考虑到组件、生命周期和 DI 的复杂性，我认为这不会在不久的将来实现。新的 Ivy 渲染器可能会在某个时候为此铺平道路。

要实现您的要求，您需要指示 Angular 动态创建组件/指令 - Angular 对此提供支持。

一些可能对您有用的资源是:

• Angular 2: How can I apply directives to sanitized html/innerhtml
• How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
• https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular
• https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d