Angular4 + KeystoneJS元素不加载或缺失属性

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

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

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

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

目前，如果我把在选择这样的：

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

然后我只看到“1”，在Chrome检查没有应用音符选择的迹象。

下面是一些我使用的相关代码...

FullArticleComponent这让在全article.component.ts的文章：

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; 
     } 
    ); 
    } 
}

全部文章使用的innerHTML属性中加载全article.component.html：

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

来源

2017-09-24 D. Proctor

应用笔记组件的确切含义是什么，以及“通过索引将两者连接在一起”是什么意思？ – Moema

@Moema脚注在两个地方引用。首先，它在应用笔记选择器出现的实际文本中显示为上标数字。其次，包含作者，标题，链接等的完整注释将出现在页面底部的脚注区域。应用笔记将格式化文本中的参考编号并链接到相应的脚注。脚注编号将是脚注索引+1。 –

什么是/您的解决方案？ – Moema

你之所以只看到一个“1”，而不是HTML元素（APP音符选择器）是因为角度做一个消毒当绑定到innerHtml时，请参阅Angular docs了解更多信息。

例如，您可以轻松地创建一个管道，该管道通过绕过消毒进行，参见this post。

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

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

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

来源

2017-09-27 07:32:17 Moema

Angular4 + KeystoneJS元素不加载或缺失属性

回答

相关问题