Angular4 + KeystoneJS 元素未加载或缺少属性答案

【问题标题】：Angular4 + KeystoneJS elements not loading or missing attributesAngular4 + KeystoneJS 元素未加载或缺少属性
【发布时间】：2017-09-27 15:32:17
【问题描述】：

我正在重新设计一个网站，使用 angular 作为前端，keystoneJS 作为后端。该站点的工作方式如下：编辑器在 keystone 的所见即所得编辑器 (tinymce) 中将文章加载到后端。 Keystone 将其以简单的文本/HTML 格式保存在 mongo 数据库中。然后，角度前端连接到数据库并检索它需要的文章并显示它/它们。

keystone 中的文章模型有许多属性，如作者、提取物等，但本期的关键是 1) 全文文本：article.content.extended(string) 和 2) 脚注： article.footnotes（数组）。

我想让编辑者能够通过添加一个带有脚注编号的简单角度组件选择器来轻松地在文章文本中添加脚注编号。这将避免让他们手动输入大量 HTML 内容。他们将分别输入所有脚注信息，角度组件将通过索引将两者链接在一起。

但是，我无法创建这个 app-note 组件，因为当我测试以确保如果我将 angular app-note 选择器添加到文章文本时它会在浏览器中呈现，它没有出现。所以，我的问题是如何从具有角度选择器的数据库中正确加载数据，以便角度可以正确处理它们？

目前，如果我输入如下选择器：

<app-note>1</app-note>

然后我在 chrome 检查器中只看到“1”，没有应用笔记选择器的迹象。

这是我正在使用的一些相关代码...

在full-article.component.ts中获取文章的FullArticleComponent：

import { PostsService } from './../../posts.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-full-article',
  templateUrl: './full-article.component.html',
  styleUrls: ['./full-article.component.css']
})
export class FullArticleComponent implements OnInit {
  slug = 'initial slug';
  article: any = 'initial article';

  constructor(private postsService: PostsService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
      this.article = this.postsService.getArticle(this.slug);
    });
    this.postsService.articleChanged.subscribe(
      () => {
        this.article = this.postsService.currentArticle;
      }
    );
  }
}

使用 full-article.component.html 中的 innerHTML 属性加载整篇文章：

<div class="post-content" [innerHTML]="article.content.extended"></div>

【问题讨论】：

app-note 组件到底是什么意思，“通过索引将两者链接在一起”是什么意思？
@Moema 在两个地方引用了脚注。首先，它在应用笔记选择器出现的实际文本中显示为上标数字。其次，包含作者、标题、链接等的完整注释将出现在页面底部的脚注区域。 app-note 将格式化文本参考编号并链接到相应的脚注。脚注编号为脚注索引+1。
你的解决方案是什么？

标签： angular keystonejs

【解决方案1】：

您只看到“1”而不是 html 元素（app-note 选择器）的原因是因为 Angular 在绑定到 innerHtml 时正在执行清理，请参阅 Angular docs 了解更多信息。

您可以轻松创建一个绕过清理的管道，例如，请参阅this post。

如果您这样做，您应该会在 Chrome 检查器中看到您的应用笔记选择器。但这不会按你想要的方式工作，因为这个 html 元素不是“Angular 系统”的一部分，所以在初始化期间，Angular 不知道这个动态元素，它永远不会被初始化。

如果您想从 CMS 加载 Angular 组件，则必须在获取数据后动态创建组件，请参阅 here 以获取参考。

不过，在您的情况下，我想我会采用一个简单的解决方案（我希望我理解一切正确）。您不必动态格式化，用户可以在所见即所得编辑器中格式化脚注（格式 -> 上标 - 创建 <sup> 元素）。因此，您的用户只需在文本中设置脚注编号，然后创建具有相同编号的相应脚注元素。

【讨论】：