Question

我正在尝试向仪表板添加组件。我正在尝试设置可重用的代码。问题是，当我在组件标记中放入相同的确切代码时。

<members-online></members-online>

并将其置于组件中，样式消失。见下图。

信息中心HTML

<div class="animated fadeIn">
<div class="row">
    <div class="col-sm-6 col-lg-3">
  <div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>
</div>
<members-online></members-online>
</div>

会员在线组件

import { Component } from '@angular/core';

@Component({
selector: 'members-online',
template: `<div class="col-sm-6 col-lg-3">
  <div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>
</div>`
})
export class MembersOnlineComponent {   
}

删除

时在chrome中

<members-online></members-online>

标记样式是固定的。

左图像是组件标记之外的div，右图是组件标记中的确切代码。我认为他们应该做同样的事情。

更新将样式标记添加到我的组件确实会显示该框

styles: [':host {border: 1px solid black; width: 100%}']

没有100％的宽度，它仍然没有

styles: [':host {display: block;  border: 1px solid black;}']

Answer 1

Angular为member-online添加了一个额外的div作为你的组件html的父级，它可能会破坏你的CSS。您始终可以使用以下命令设置此div的样式：主机选择器和组件css文件。

:host {
  display:block;
}

Answer 2

好的，这就是我做的。感谢@Julia我发现＆＃34; Angular对待＆lt;会员在线＆gt;标记为额外的div。

因此，我只是从模板中删除了额外的div

<div class="card card-inverse card-primary">
    <div class="card-block pb-0">
      <div class="btn-group float-right" dropdown="" placement="bottom right">
        <button class="btn btn-transparent dropdown-toggle p-0" dropdowntoggle="" type="button" aria-haspopup="true">
          <i class="icon-settings"></i>
        </button>
        <!---->
      </div>
      <h4 class="mb-0">9.823</h4>
      <p>Members online</p>
    </div>
    <div class="chart-wrapper px-1" style="height:70px;"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
      <canvas basechart="" class="chart" width="236" height="70" style="display: block; width: 236px; height: 70px;"></canvas>
    </div>
  </div>

然后最终将成员在线标记放在我的div列

中

<div class="col-sm-6 col-lg-3">
  <members-online></members-online>
</div>

如何在Angular 2组件标记中继承样式

2 个答案: