Question

我有一个时间轴，我显示项目我想将项目移动到另一个组件。

Ao我使用输入创建了一个新组件，但它可以工作但不是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>

这是主要的组成部分：

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

Answer 1

发现问题：

在CSS中，时间轴我有一个.timeline＆gt; li> .timeline面板所以一切都取决于li元素。

Angular在这上面渲染一个自己的元素，所以直接项目是类的，并且css样式不再起作用了。我删除了css中的直接依赖，现在它可以工作了！

Angular2 Sytling嵌套组件不起作用

1 个答案: