Html 如何为Angular 4中的ng模板标记指定样式？ 可用小部件 {{widget.data.title} 预览 选择权

如何设置

ng模板

标记的高度和宽度。我试着在

ng模板

标记中加入一些内联样式，但它没有反映出角度文档中的内容

是用于呈现HTML的角度元素。它是 从不直接显示。事实上，在渲染视图之前，角度 将及其内容替换为注释

如果没有结构指令，而只包装一些元素 在一段时间内，这些元素消失了。这就是你生命中元素的命运

---

Angular是一个分组元素，它不会干扰样式或布局，因为Angular不会将其放入DOM中。因此，您无法将样式设置为该值。

ng template

不是DOM元素，它没有样式设置。但是您可以在模板中嵌套一些

div

，并设置其样式。

 <mat-dialog-content class="no-scroll" >

  <mat-divider></mat-divider>
  <section class="row add-widget-container">
   <span class="col-md-4 text-center">
      <h4>Available widgets</h4>
        <div class="selectable-widgets">
            <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="selectedWidget" (change)="showPreview()" [vertical]="true">
                <mat-button-toggle color="primary" *ngFor="let widget of availableWidgets" 
                    [value]="widget">{{widget.data.title}}</mat-button-toggle>
            </mat-button-toggle-group>
        </div>
   </span>
   <span class="col-md-4">
      <h4 class="text-center">Preview</h4>
    <ng-template #widgetPreview ></ng-template>
  </span>
  <span class="col-md-4 text-center">
      <h4>Options</h4>  

  </span>
  </section>
</mat-dialog-content>