Angular：将 class 添加到 CDK 门户内的 html 元素

Question

我有一个带有 Angular12 和 Angular Material CDK 的应用程序。

我在 CDK 门户中添加一个模板，模板是这样的：

<ng-template #templatePortalContent>
     <div class="editable" #newFormField>
         stuff            
     </div>
</ng-template>

我需要将 class 动态添加到#newFormField项，但不知道如何访问它。 通常，如果这是一个常规的 ng 模板，例如#addressBlock我可以使用

 @ViewChild('addressBlock') addressBlock: ElementRef;
 this.addressBlock.nativeElement.classList.add('editingActive');

但是，这不起作用并引发错误

 @ViewChild('newFormField') newFormField: ElementRef;
 this.newFormField.nativeElement.classList.add('editingActive');

我认为是因为newFormField位于插入门户的#templatePortalContent模板内。

我如何引用内部元素？

Answer 1

该模板将能够从声明它的位置访问组件属性。 渲染模板后，也可以访问ViewChild （我很确定 👀）

<ng-template #templatePortalContent>
     <div [ngClass]="editableClass" #newFormField>
         stuff            
     </div>
</ng-template>

// In the component
public editableClass = 'editable'