Question

我正在尝试为台式机和移动设备创建一个基本的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，但这似乎不起作用。

子组件未在iOS上显示

0 个答案: