如何在Angular 2組件標籤中繼承樣式

我正在嘗試向我的儀表板添加組件。我正在嘗試設置可重用的代碼。問題是，當我將相同的確切代碼放在組件標籤中時。如何在Angular 2組件標籤中繼承樣式

<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;}']

來源

2017-04-24 Demodave

Angular爲成員在線添加一個額外的div，作爲組件html的父級，它可能會破壞你的CSS。您始終可以使用以下命令對該div進行樣式設置：帶有組件css文件的主機選擇器

:host { 
    display:block; 
}

來源

2017-04-24 14:36:53

內這樣做，它適用表明粘合盒確實是正確的尺寸，但背景不會改變。我會更新我的代碼。 – Demodave

嗯，這讓我在正確的軌道上。 – Demodave

好吧，這就是我所做的。由於@Julia我發現，「角對待<會員制在線>標籤作爲一個額外的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>

來源

2017-04-25 12:51:54 Demodave

如何在Angular 2組件標籤中繼承樣式

回答

相關問題