Question

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

我们如何设置ng-template标记的高度和宽度。我尝试将一些内联样式添加到ng-template标记中，但它没有反映出来

Answer 1

来自Angular文档，

The <ng-template>

＆lt; ng-template＆gt;是一个用于呈现HTML的Angular元素。它是   从未直接显示。实际上，在渲染视图之前，Angular   替换＆lt; ng-template＆gt;及其内容和评论。

如果没有结构指令，你只需要包装一些元素   在＆lt; ng-template＆gt;中，这些元素消失。这是＆lt; ng-template＆gt;中
的元素的命运。

Answer 2

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

如何在Angular 4中为ng-template标签赋予样式？

2 个答案: