Question

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

keystone中的文章模型有许多属性，如作者，摘录等，但这个问题的关键是1）完整的文章文章：article.content.extended（string）和2）脚注： article.footnotes（array）。

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

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

目前，如果我将选择器放入：

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

然后我只看到＆＃34; 1＆＃34;在chrome检查器中没有应用笔记选择器的标志。

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

在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>

Answer 1

你只看到“1”而不是html元素（应用笔记选择器）的原因是因为Angular在绑定到innerHtml时正在进行清理，请参阅{{ 3}}了解更多信息。

您可以通过绕过清理轻松创建管道，有关示例，请参阅Angular docs。

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

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

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

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

1 个答案: