如何访问 TemplateRef 变量中的子元素？答案

【问题标题】：How do I access a child element in a TemplateRef variable?如何访问 TemplateRef 变量中的子元素？
【发布时间】：2021-09-30 22:22:51
【问题描述】：

我有一个包含模式的组件。模态框包含在 <ng-template> 标记中。

<ng-template #modalm let-modal>
...
   <button type="button" (click)="onSubmit()" class="btn btn-primary">OK</button>
...
</ng-template>

这允许我从我的 component.ts 文件中打开和关闭模式。

constructor(private modalService: NgbModal,
    private activeModal: NgbActiveModal)
...
public openModal(modalm: TemplateRef<any>){
    this.activeModal = this.modalService.open(modalm);    
    const btn = modalm.elementRef.nativeElement.querySelector('.btn-primary');
  }

我想访问按钮元素并在其上设置一个属性。我正在关注How do I find Element inside TemplateRef 中接受的答案，从modalm.elementRef.nativeElement 中调用querySelector。这给了我一个错误：

TypeError: modalm.elementRef.nativeElement.querySelector is not a function

为什么在这种情况下我无法拨打querySelector？

我知道我必须使用 TemplateRef 类型，因为模态被包裹在 ng-template 中。访问模态元素的正确语法是什么？

【问题讨论】：

你应该避免依赖.querySelector。你为什么不尝试通过NgbModalRef#componentInstance 传递所需的选项呢？
@developer033 我可以为模态创建一个单独的组件。这是必需的还是我可以从该组件的 component.ts 文件中访问 html 元素？

标签： angular typescript bootstrap-5

【解决方案1】：

video from Max NgWizard 为我指明了正确的方向。对于 TemplateRef 实例，我找不到允许 ts 访问 DOM 以便可以设置按钮属性的方法。正如 cmets 所示，也不推荐在 ts 文件中设置元素属性。最好将类似 ngClass 的指令放在 html 标记中，并在 ts 文件中查找标志。为此可以在组件 css 文件中创建一个类。

首先，我在组件 css 文件中创建了一个具有我需要的样式属性的类“.myClass”。然后我可以在我的按钮上添加一个条件指令来添加这个类，比如

<button type="button" (click)="onSubmit()" class="btn btn-primary" [class.myClass]="loadComplete">OK</button>

布尔值loadComplete 控制 ts 文件中 css 类的应用。

在我的例子中，css 类需要添加 !important 语句来覆盖 Bootstrap 样式定义。

.myClass {
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    color: red !important;
  }

【讨论】：