在浏览器中为Ionic应用程序设置标题

我正在开发一个Ionic应用程序，它也可以在浏览器上作为Web应用程序运行。

在 html 中，我有以下代码：

<ion-header>
  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

我认为离子标题标签足以更改浏览器选项卡上的标题，但似乎并非如此。它仍然是"离子应用程序"。如何更改它？

谢谢

检查 src 文件夹中的 "index.html" 文件。你会看到"标题"html标签。在那里改变它，它会反映。

Ionic 5 兼容解决方案

import { Title } from '@angular/platform-browser';
...
export class MyPage {
    constructor(private titleService: Title) {
        this.titleService.setTitle('Title');
    }
}

Ionic 5 + React的解决方案：

很可能您正在处理/src/中的文件，而编译的文件进入www/。

您可能想知道为什么/src/index.html或/src/manifest.json不存在，或者为什么手动创建它们不起作用。

只需查看您的资产(Web/PWA 的应用程序图标和图标(以及index.html和manifest.json蓝图/public/。

/public/index.html看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>
    <base href="/" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我希望Ionic会考虑你放入/ionic.config.json的应用程序名称，但正如你所看到的，它被硬编码为"Ionic App"。

相关内容

最新更新

热门标签：