如何在 ionic 2 中创建自定义加载页面答案

【问题标题】：How to Create a Custom Loading page in ionic 2如何在 ionic 2 中创建自定义加载页面
【发布时间】：2016-12-16 09:24:55
【问题描述】：

Ionic 2 默认加载页面是 src/index.html。我想用工作 app.component.ts 将它更改为我自己的 custom.html。正如我已经尝试通过将 content-src 标记更改为 config.xml 文件中的自定义 .html 文件来实现的那样。但是当我这样做时，app.component.ts 中的任何函数都不会执行，换句话说，控制根本不会进入其中。我不想尝试这个http://www.joshmorony.com/how-to-create-a-custom-loading-component-in-ionic-2/，因为这不适用于 ionic 2。

所以请建议我如何将我的默认加载页面（即 index.html）更改为自定义页面。

【问题讨论】：

你需要什么输出。到目前为止，您尝试过的需要一些代码
应用的起始页默认为index.html。但在我的情况下，我希望起始页面是 channel.html。当我将预先编写的网站代码转换为 IOS 应用程序时，许多依赖项已经设置为 channel.html。所以我想 channel.html 出现在应用程序加载而不是 index.html ...

标签： cordova phonegap-plugins ionic2 hybrid-mobile-app

【解决方案1】：

我认为最简单的解决方案是将custom.html 的内容放在index.html 的<my-app></my-app> 标记之间。此处定义的内容只会在组件<my-app> 加载后才会显示。

这是我自己用的一个例子

index.html

<body>    
  <my-app>
    <!-- loading page-->
    <div class="row" style="background-color: black; text-align: center;">
        <img src="images/loading.gif" style="width: auto; height: 100%;"/>
    </div>
  </my-app>
</body>

这将在黑色背景上全屏显示我的loading.gif。

（内嵌样式，因此我不必在样式表中添加）。

结果：

【讨论】：

感谢您的回复。但是我有一些已经使用 custom.html 的 Javascript 和其他代码依赖项......对于我未来的项目增强，只有当我有我的 custom.html 时才好......所以我想在页面加载时加载它...... .有什么选择吗？？
您可以尝试在<my-app> 标签之间包含您的custom.html。不确定 javascript 文件的加载速度和 w3IncludeHtml() 的速度。在此处查看指南w3schools.com/howto/howto_html_include.asp