Angular 19中如何恢复ng-template类属性的旧输入行为？

Angular 19调整了对ng-template这类模板元素的原生属性处理逻辑，原生class属性不再自动触发指令的@Input("class")绑定，这导致你之前的代码失效。以下两种方案可以在不修改大量模板代码的前提下恢复旧行为：

方案一：使用@Attribute获取静态class值 #

如果你的模板中class都是静态赋值（比如class="foo bar"），可以直接用@Attribute装饰器在指令构造函数中获取初始class值，这种方式简单高效：

import { Directive, Input, Attribute } from '@angular/core';

@Directive({
    selector: "ng-template[model]",
    standalone: false,
})
export class ViewSelector {
    private _model: Object | undefined;

    @Input() get model() { return this._model; }
    set model(value: Object) {
        // 你的原有逻辑
    }

    constructor(@Attribute("class") private readonly initialClasses: string | null) {
        // 初始化时处理类名，复制到实例化视图
        if (this.initialClasses) {
            this.updateViewClasses(this.initialClasses);
        }
    }

    private updateViewClasses(classes: string) {
        // 实现将类名复制到实例化视图的逻辑
    }
}

方案二：用MutationObserver监听class动态变化 #

如果需要支持动态绑定的class（比如[class.active]="isActive"），可以结合ElementRef和MutationObserver监听ng-template元素的class属性变化，既能捕获初始值，也能响应后续的属性变更：

import { Directive, Input, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Directive({
    selector: "ng-template[model]",
    standalone: false,
})
export class ViewSelector implements OnInit, OnDestroy {
    private _model: Object | undefined;
    private classObserver: MutationObserver | undefined;

    @Input() get model() { return this._model; }
    set model(value: Object) {
        // 你的原有逻辑
    }

    constructor(private elementRef: ElementRef<HTMLElement>) {}

    ngOnInit() {
        // 处理初始class值
        const initialClasses = this.elementRef.nativeElement.getAttribute('class');
        if (initialClasses) {
            this.updateViewClasses(initialClasses);
        }

        // 监听class属性变化
        this.classObserver = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.attributeName === 'class') {
                    const newClasses = (mutation.target as HTMLElement).getAttribute('class') || '';
                    this.updateViewClasses(newClasses);
                }
            });
        });

        this.classObserver.observe(this.elementRef.nativeElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }

    ngOnDestroy() {
        // 销毁时断开监听，避免内存泄漏
        this.classObserver?.disconnect();
    }

    private updateViewClasses(classes: string) {
        // 实现将类名复制到实例化视图的逻辑
    }
}

原理说明 #

Angular 19对模板元素的原生属性绑定做了更严格的区分，原生class属性不再被当作指令的输入绑定处理，而是直接归属于模板元素本身。通过@Attribute或MutationObserver，我们可以绕过Angular的输入绑定机制，直接从DOM元素上获取或监听class属性的变化，从而保持原有模板写法不变。

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