时间戳

首页 > 解决方案 > Ionic V4：如何声明要在整个页面中调用的通用 HTML 代码？

html - Ionic V4：如何声明要在整个页面中调用的通用 HTML 代码？

问题描述

我创建并发布了一个运行良好的 Ionic V4 应用程序。

我现在想清理它并减少它的编码大小。在这个应用程序中，我有一段在页面上重复的 HTML（只是文本）。目前我在每一页都重复了它，这并不好。

为了避免这种重复，我创建了一个名为 htlmCommon 的服务。在其中我声明了包含 HTML 代码的变量。（示例 msg1 :string =”&lt;h1> Hello from HtmlCommon </h1>”;*）

我在我的页面中引用了这个服务，我通过调用这个变量<div [innerHTML]='this.HtmlCommon.msg1'></div>

它工作正常，但变量不能有离子标签（如<ion-row>, <ion-col>等）。它搞砸了

我该如何解决这个问题？或者也许我的方法不正确！

我创建一个新服务的原因是因为默认的“gobal-info.service.ts”已经加载了我所有的常用方法。

谢谢

标签： htmlionic-framework

解决方案

您可以创建一个组件并在其 html 文件中添加您想要在所有常见页面中使用的 html。假设您将组件创建为 commonHTMLComponent，然后：

commonHTML.component.html

<ion-grid>
    <ion-row>
        <ion-col>col 1</ion-col>
        <ion-col>col 2</ion-col>
    </ion-row>
</ion-grid>

commonHTML.component.ts

@Component({
   selector: 'app-common-html'
})

现在，您可以在应用程序的任何位置使用此选择器来嵌入常见的 html，例如：

<app-common-html></app-common-html>

推荐阅读