使用Angular属性绑定时，如何在Lit中获取变更通知？

我们正尝试将基于Lit构建的Web Component集成到Angular应用中。该Web组件拥有一个myUrl属性，其变更需要触发特殊逻辑以从服务器重新加载数据：

@customElement('my-component')
export class MyComponent extends LitElement {
    @property({type: String})
    myUrl = '';

    override async attributeChangedCallback(
        name: string,
        old: null | string,
        value: null | string
    ) {
       super.attributeChangedCallback(name, old, value);
       if (name === 'myUrl' && value && value !== old) {
           // 当属性变更时手动触发数据获取
           await this.fetchData();
      }
   }   
}

当我们尝试为该属性使用Angular属性绑定时，attributeChangedCallback从未被调用：

<my-component [myUrl]="'https://example.com/test.json'" >   
</my-component>

但静态设置值时该方法能正常工作：

<my-component myUrl="https://example.com/test.json" >   
</my-component>

如果为myUrl属性添加hasChanged回调，使用Angular属性绑定时该回调会被调用，但无法在hasChanged中访问Web组件实例，因此无法触发数据重载。

请问使用Angular属性绑定时，如何在Lit中获取变更通知？

核心原因是：Angular的[myUrl]属性绑定是直接设置Web Component的DOM属性，而非HTML attribute。你依赖的attributeChangedCallback仅在HTML attribute变更时触发，直接设置DOM属性不会走这个回调。

Lit提供了更适配属性变更的处理方式，推荐以下两种方案：

方案一：使用updated生命周期钩子 #

Lit的updated钩子会在组件属性更新后触发，可在此对比新旧属性值，触发数据加载逻辑：

@customElement('my-component')
export class MyComponent extends LitElement {
    @property({type: String})
    myUrl = '';

    override async updated(changedProperties: PropertyValues<this>) {
        super.updated(changedProperties);
        // 检查myUrl是否发生变更，且新值有效
        if (changedProperties.has('myUrl') && this.myUrl) {
            await this.fetchData();
        }
    }

    private async fetchData() {
        // 你的数据加载逻辑
    }
}

方案二：使用属性的getter/setter #

直接为myUrl定义setter，无论属性是通过HTML attribute还是DOM属性赋值，都会触发setter逻辑：

@customElement('my-component')
export class MyComponent extends LitElement {
    private _myUrl = '';

    @property({type: String})
    get myUrl() {
        return this._myUrl;
    }

    set myUrl(newValue: string) {
        const oldValue = this._myUrl;
        if (newValue !== oldValue) {
            this._myUrl = newValue;
            // 标记组件需要更新（若需渲染属性变更则添加）
            this.requestUpdate('myUrl', oldValue);
            // 触发数据加载
            this.fetchData();
        }
    }

    private async fetchData() {
        // 你的数据加载逻辑
    }
}

两种方案均完美兼容Angular属性绑定：

• updated钩子更适合处理多属性变更后的统一逻辑
• setter则更直接，能在属性赋值瞬间触发对应操作

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