Angular2 Sytlingネストされたコンポーネントが動作しない

Question

アイテムを表示するタイムラインがあります アイテムを別のコンポーネントに移動したいと考えました。

アオ100％iが入力に新しいコンポーネントを作り、それが動作しなく：

Imがサブコンポーネントを使用していないときは、このスクリーンショットである。

NORMAL

下図に示します私は、HTMLタグとしてそれを使用しようとしました

BROKEN

サブコンポーネントで表示し、たとえ属性として<li>タグであっても。これは主componnentある

<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> 

：ここPlunker PLUNKERである

コンポーネント： 何も

EDIT作品ない

<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> 

CSSで

私は はそうすべてはli要素に依存.timeline> LI> .timelineパネルを持っていたタイムライン：

Answer 1

は、問題を発見します。

Angularはこれに独自の要素をレンダリングします。そのため、直接的な項目がクラスとなり、CSSスタイルはもう機能しません。 私はcssの直接の依存関係を削除しました。