0

我们用 Angular 编写应用程序。在我们的应用程序中，我们需要写文章，所以我们决定使用 Editor.js。现在我们遇到了如何正确解析 JSON 文章并从中生成 HTML 的问题。对于文章，我们有这样的 JSON 对象。

        {
            "id" : "1",
            "type" : "header",
            "data" : {
                "text" : "Main title",
                "level" : 1
            }
        },
        {
            "id" : "2",
            "type" : "paragraph",
            "data" : {
                "text" : "Some text <mark>something</mark>"
            }
        },
        {
            "id" : "3",
            "type" : "list",
            "data" : {
                "style" : "unordered",
                "items" : [
                    "list-item 1",
                    "list-item 2",
                    "list-item 3"
                ]
            }
        },
        {
            "id" : "4",
            "type" : "image",
            "data" : {
                "file" : {
                    "url" : "www.com/test.png"
                },
                "caption" : "",
                "withBorder" : false,
                "stretched" : false,
                "withBackground" : false
            }
        }

对于简单的 JSON，毫无疑问我会在 Angular 模板中生成 HTML，但是根据我们的需要，我们可能会有更复杂的块和许多样式选项，所以我认为在模板处处理的逻辑太多，并且可能会减慢我们的应用程序. 例如，对于图像，我们必须根据caption、withBackground、stretched、等属性有条件地使用不同的类或样式withBorder。并且我们可能在文章和其他具有多种样式选项的块中有多个图像。

另一种方法是在 .ts 文件中解析 JSON，并将所有块映射到具有某些类和样式的 html-string。但是，如果我们有类似图片库或滑块或其他一些复杂块的东西，我们将不得不生成非常大的字符串，我认为用单独的组件替换会更好，但据我所知，我们不会能够将组件选择器用作模板中的字符串。另外我认为如果在 .ts 文件中生成 html，我们可能会遇到样式封装问题。

所以我的问题是从如此复杂的 JSON 生成 HTML 的最佳方法是什么？如果我们将复杂的逻辑放在模板中，真的会减慢我们的应用程序吗？也许有第三种或第四种方法可以做到这一点？

4

0 回答 0