小编Eri*_*yke的帖子

我有一个太大的组件，我想缩小它。我可以通过比例变换来做到这一点，但父容器不会缩小以适应。

在我的真实代码中，带有 SHRINK-ME 类的 div 实际上是一个 Angular 日历组件，但是这个简化的repo再现了相同的效果。我不能只缩放环绕父 div，因为我需要使用 Bootstrap 列网格类来容纳此示例中省略的对象。我在这里缺少一个简单的 CSS 属性吗？

.parent {
  background-color: green;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

我的代码有和没有转换：

.parent {
  background-color: green;
  width: 40%;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: …

我想创建一个组件，其中包含一个ng-select组件，我向该组件传递一组复杂对象以及要在下拉列表中显示的字段和所选值的定义。您可以ng-select指定要显示的字段 ( bindLabel) 并定义一个模板来显示所选值（您可以显示对象中的一个或多个字段或其他 HTML 标记）。我能够传递 的值bindLabel，但无法弄清楚如何插入模板。

例如，这就是我通常使用的方式ng-select。在本例中，我显示对象的两个字段和一些 HTML（将缩写字段加粗），并在下拉列表中列出缩写字段：

子组件

  items = [
    { name: 'United States', abbreviation: 'US' }, 
    { name: 'United Kingdom', abbreviation: 'UK' }, 
    { name: 'Canada', abbreviation: 'CA' }
  ];
  displayField = 'abbreviation';

子模板

  <ng-select [items]="items" 
           bindLabel="displayField"
           [(ngModel)]="model"
           name="ngselect" 
           (change)=emitModelChanged()>
      <ng-template ng-label-tmp let-item="item">
          <b>{{item.abbreviation}}</b> - {{item.name}}
      </ng-template>
  </ng-select>

要从父组件动态配置它，我传递items,displayField和template作为输入：

父组件

  selectedTemplate = '<b>{{item.name}}</b> - {{item.abbreviation}}';

父模板

  <child-component [model]=model 
                   [items]=items
                   [displayField]="'abbreviation'"
                   [template]=selectedTemplate …