时间戳

首页 > 解决方案 > 子组件未在 iOS 上显示

html - 子组件未在 iOS 上显示

问题描述

我正在尝试为桌面和移动设备创建一个基本的 Web 应用程序，但我遇到了一个问题，即在我的主组件中使用我的子组件的根选择器不会显示子组件并使其下方的元素消失。

即使子组件中的 html 是空白的，使用子组件选择器仍然会导致问题，但是如果我完全删除选择器，其他一切看起来都很好。

这是我的代码：

.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.main {
  float: left;
  width: 60%;
  text-align: center;
  padding: 0 20px;
}

.right {
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width:620px) {
  .menu,
  .main,
  .right {
    width: 100%;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div style="overflow:auto">
  <div class="menu">
    <h2>Text</h2>
    <p>Text</p>
  </div>

  <div class="main">
    <button>Test</button>
    <child-component></child-component>
  </div>

  <div class="right">
    <h2>Text</h2>
    <p>Text</p>
  </div>
</div>

这是子组件（无 CSS）：

<p>Click the button</p>
<button [hidden]="started" (click)="start()">Start</button>
<button [hidden]="!started" (click)="stop()">Stop</button>
<button [hidden]="!canreset" (click)="reset()">Reset</button>
<p>Your message: {{display}}</p>

我查看了其他帖子并尝试在子组件上设置 ViewEncapsulation.None，但这似乎不起作用。

标签： htmlcssangular

解决方案

推荐阅读