Question

我正在使用本教程https://alligator.io/ionic/ionic-4-tabs/为我的“离子选项卡”创建“路由”，但是不幸的是，显示的内容始终是隐藏的，无法显示。

我的home.page.html看起来像这样：

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children:
            [
                {
                    path: 'popular',
                    children:
                        [
                            {
                                path: '',
                                loadChildren: '../popular/popular.module#PopularPageModule'
                            }
                        ]
                }
           ]
     }
]

我在home-routing.module.ts中定义了路由：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<h1>Hallo</h1>
</ion-content>

我的Popular.page.module.html看起来像这样：

video(req, res) {
const videoPath = req.query.videoPath;
const stat = fs.statSync(videoPath);
const fileSize = stat.size;
const range = req.headers.range;
if (range) {
  const parts = range.replace(/bytes=/, "").split("-");
  const start = parseInt(parts[0], 10);
  const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
  const chunksize = end - start + 1;
  const file = fs.createReadStream(videoPath, { start, end });
  const head = {
    "Content-Range": `bytes ${start}-${end}/${fileSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": chunksize,
    "Content-Type": "video/mp4"
  };
  res.writeHead(206, head);
  file.pipe(res);
} else {
  const head = {
    "Content-Length": fileSize,
    "Content-Type": "video/mp4"
  };

  res.writeHead(200, head);
  fs.createReadStream(videoPath).pipe(res);
}

我很期待h1标签“ Hallo”的出现，但不幸的是它什么也没显示。确实有趣的是，h1-Tag显示在浏览器的Developer-Tools中。

有什么想法吗？

Answer 1

这使我头疼XD。您不应该将标签放在标题中。 taps组件/元素是在页面上方的级别生成的，因为header元素是在页面内生成的，所以将选项卡粘贴在header中会引起各种疯狂。

我仔细阅读了本教程，并使其正确显示

home.page.html-

<ion-tabs>
<ion-tab-bar slot="top" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

<ion-tab-button tab="tab2">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

请评论您要我添加的内容

Ionic 4：带路由的标签不显示内容

1 个答案: