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嵌套组件不工作

回答

相关问题