Angular2 Sytling嵌套組件不工作

我有一個時間軸，我顯示項目我想將項目移動到另一個組件。Angular2 Sytling嵌套組件不工作

AO I由一個新的組件具有輸入端和它的工作原理，但不是100％：

這是當即時通訊不使用子組件的屏幕截圖：

NORMAL

下圖爲查看子組件

BROKEN

我試圖使用它作爲一個HTML標籤和即使在作爲屬性的<li>標記中也是如此。沒有任何工程

編輯：這裏是Plunker PLUNKER

的組件：

<div *ngIf="item.participated"> 
    <div class="timeline-badge success"> 
     <i class="glyphicon glyphicon-ok"></i> 
    </div> 
    </div> 

    <div *ngIf="!item.participated"> 
    <div class="timeline-badge warning"> 
     <i class="glyphicon glyphicon-info-sign"></i> 
    </div> 
    </div> 

    <div class="timeline-panel"> 
    <div class="timeline-heading"> 
     <h4 class="timeline-title">Nächstes Essen am {{ item.Date | date:'dd.MM.yyyy' }}</h4> 
     <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> erstellt am: {{ item.Created | date:'dd.MM.yyyy' }} durch {{ item.CreatedBy }}</small></p> 
     <p><small class="text-muted"><i class="glyphicon glyphicon-info-sign"></i> Teilnehmer: {{ item.Orders?.length }}</small></p> 
    </div> 
    <div class="timeline-body"> 
     <div class="row"> 
     <!-- Template for if user has not participated in the appointment --> 
     <div *ngIf="!item.participated" class="col-md-3"> 
      <div> 
      <button [disabled]="!canParticipate(item)" (click)="navigateToAppointment(item.Id)" type="button" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-ok"></i></button> 
      </div> 
     </div> 

     <div *ngIf="item.participated" class="col-md-3"> 
      <div> 
      <button [disabled]="!canParticipate(item)" (click)="deleteOrder(item.Id)" type="button" class="btn btn-danger btn-circle"><i class="glyphicon glyphicon-remove"></i></button> 
      </div> 
     </div> 

     <!-- Template for if user is admin --> 
     <div *ngIf="IsAdmin" class="col-md-3"> 
      <div> 
      <button [disabled]="item.Orders?.length > 0" (click)="deleteAppointment(item)" type="button" class="btn btn-danger btn-circle"><i class="glyphicon glyphicon-exclamation-sign"></i></button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>

這是主要的componnent：

<ul class="timeline"> 
     <li app-comp [item]=item [class.timeline-inverted]="i%2 != 0" *ngFor="let item of appointments | orderBy : ['Date'] | async ;let i = index"> 
</li> 
<ul>

我想這甚至作爲一個正常的組分：

<ul class="timeline"> 
     <li [class.timeline-inverted]="i%2 != 0" *ngFor="let item of appointments | orderBy : ['Date'] | async ;let i = index"> 
      <app-comp [item]=item> 
      </app-comp> 
     </li> 
     </ul>

來源

2017-03-08 Skary

您可以直接將圖片上傳到這個問題，以便在我們嘗試查看屏幕圖片時不顯示廣告，或者您可以創建一個plunk？某人閱讀您的問題會變得更容易。 –

嗨，當然：https：//embed.plnkr.co/4oRPuvYCRADmW7a8le2S/ – Skary

發現了問題：

在CSS時間軸我有一個.timeline> LI> .timeline面板所以一切取決於li元素上。

Angular在此上呈現一個自己的元素，所以直接項是beetwen的類和CSS風格不再工作。我刪除了在CSS中的直接依賴關係，現在它的工作原理！

來源

2017-03-10 09:17:56 Skary

Angular2 Sytling嵌套組件不工作

回答

相關問題