如何为Angular 4中的ng-template标签设置样式？

嘿，我来帮你解决这个问题～首先得明确一个关键知识点：ng-template本身是Angular的模板容器，它不会被直接渲染到DOM中，所以你直接给ng-template加CSS类或者行内样式是完全无效的。我们得从它最终渲染出来的实际元素，或者包裹它内容的容器入手，结合你提供的代码片段，给你几个实用的解决方案：

1. 针对渲染后的实际DOM元素写样式 #

你的代码里，ng-template（如果有的话）里的内容最终会被替换成mat-button-toggle-group、mat-button-toggle这些Material组件元素，这些元素会实实在在出现在DOM里。你可以直接通过它们的父容器类来定位并设置样式，比如你代码里的.selectable-widgets：

/* 给按钮组设置内边距和背景色 */
.selectable-widgets mat-button-toggle-group {
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* 调整每个按钮的间距 */
.selectable-widgets mat-button-toggle {
  margin: 6px 0;
  width: 100%;
}

2. 使用::ng-deep穿透组件视图封装 #

Angular的组件视图封装会隔离样式，如果你发现Material组件的默认样式无法被覆盖，可以用::ng-deep来强制穿透样式隔离。为了避免影响全局样式，建议配合:host限定作用域（只作用于当前组件内的元素）：

/* 只在当前组件内修改选中按钮的样式 */
:host ::ng-deep .selectable-widgets mat-button-toggle.mat-button-toggle-checked {
  background-color: #1976d2;
  color: #ffffff;
  font-weight: 500;
}

注：::ng-deep在后续Angular版本中被标记为废弃，但在Angular 4中是完全可用且实用的方案。

3. 给ng-template内容添加包裹容器（如果没有的话） #

如果你的ng-template里的内容没有外层容器，可以手动添加一个div或section并赋予类名，这样就能轻松通过类名控制样式：

<ng-template>
  <div class="template-wrapper">
    <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="selectedWidget" ...>
      <!-- 按钮内容 -->
    </mat-button-toggle-group>
  </div>
</ng-template>

对应的CSS：

.template-wrapper {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
}

4. 动态设置样式（通过组件类） #

如果需要在组件逻辑里动态修改样式，可以通过ViewChild获取模板里的元素引用，然后操作原生DOM：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatButtonToggleGroup } from '@angular/material/button-toggle';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('group') toggleGroup: MatButtonToggleGroup;

  ngAfterViewInit() {
    // 获取原生元素并设置样式
    const nativeGroup = this.toggleGroup._elementRef.nativeElement;
    nativeGroup.style.maxHeight = '350px';
    nativeGroup.style.overflowY = 'auto';
  }
}

结合你提供的代码，最直接的方式就是用第一种方法，通过.selectable-widgets这个父容器来定位内部的Material组件，设置你需要的样式～

内容的提问来源于stack exchange，提问作者Midhun Gopinath