如何在Angular 4中给ng-template标签添加样式？

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标签上放置一些内联样式，但它没有反映出来。

- Midhun Gopinath

---

ng-template 不是一个 DOM 元素，它本身没有样式。不过你可以在模板中嵌套一些 div 元素，并对这些元素进行样式设置。 - Ingo Bürk

如果我们想通过结构性指令样式化由ng-template生成的元素，该怎么办？ - Raul Chiarella

Answer 1

来自Angular文档：

<ng-template>

<ng-template>是一个用于呈现HTML的Angular元素。它从未直接显示。事实上，在渲染视图之前，Angular会使用注释替换<ng-template>及其内容。

如果没有结构性指令，你只是在<ng-template>中包装一些元素，那么这些元素将消失。这就是你的<ng-template>内部元素的命运。

- Paritosh

Answer 2

您无法对ng-template或ng-container元素进行样式设置，但解决方法是在ng-template或-ng-container内部放置div或span[根据您的要求]，并对其应用样式。

- Ajinkya Bapat

Answer 3

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

- Anuradha Gunasekara