Angular中如何将组件属性值绑定到外部HTML元素属性？

Angular对**第三方Web Component（自定义HTML元素）**的属性绑定逻辑和原生HTML元素不同：

• 当你使用[welcome-message]这种绑定语法时，Angular会默认将其识别为Angular组件的@Input输入属性，但<dashboard>是外部Web Component并非Angular组件，Angular无法找到对应的输入属性定义，因此会忽略这个绑定，导致属性消失。
• 而<img>的src是原生HTML标准属性，Angular内置了对这类属性的绑定支持，所以可以正常工作。

1. 强制绑定为HTML属性（最通用） #

使用attr.前缀告诉Angular将其作为普通HTML属性处理，而非Angular组件的输入属性：

<!-- 插值语法 -->
<dashboard attr.welcome-message="{{message}}"></dashboard>

<!-- 属性绑定语法 -->
<dashboard [attr.welcome-message]="message"></dashboard>

2. 绑定到Web Component的DOM属性（如果支持） #

大部分Web Component会将HTML短横线属性映射为驼峰式的DOM属性（比如welcome-message对应welcomeMessage），可以直接绑定这个DOM属性：

<dashboard [welcomeMessage]="message"></dashboard>

3. 手动通过代码设置属性 #

如果上述方法无效，可通过@ViewChild获取元素后手动设置属性：
在组件类中：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  message: string = "Hello";
  @ViewChild('dashboardRef') dashboardRef!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 设置HTML属性
    this.dashboardRef.nativeElement.setAttribute('welcome-message', this.message);
    
    // 若Web Component暴露了DOM属性，也可直接赋值
    // (this.dashboardRef.nativeElement as any).welcomeMessage = this.message;
  }
}

在模板中：

<dashboard #dashboardRef></dashboard>

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