如何无需引号向组件传递字符串参数？实现无引号传递字符串属性的配置技巧

首先得明确Angular绑定语法的核心逻辑：当你用[anyattribute]="value"这种方括号属性绑定时，里面的value会被当作TypeScript表达式解析——也就是说，如果MyLabel不是你组件类里定义的变量，Angular会直接报错；而你之前用的"'MyLabel'"，是因为在表达式里，单引号包裹的内容才是字符串字面量。

要实现你想要的<my-component [anyattribute]="MyLabel"></my-component>（这里的MyLabel是字符串字面量），其实有两种最直接的方案，其中第一种是Angular官方推荐的静态字符串传递方式：

方案一：移除方括号，使用普通HTML属性绑定 #

这是最简单的解决办法，完全不需要修改组件代码，直接把方括号去掉即可：

<my-component anyattribute="MyLabel"></my-component>

当你不用方括号时，Angular会自动把属性值当作字符串字面量处理，直接赋值给组件的@Input() anyattribute，完美符合你的需求。你看到的那些无需嵌套引号的组件，大概率就是用了这种方式。

方案二：给输入属性添加转换器（Angular 16+） #

如果因为某些场景必须保留方括号语法（比如需要兼容动态值和静态值的混合场景），可以给@Input配置一个转换器，让Angular自动把表达式结果转为字符串：

修改你的component.ts代码：

import { Component, Input, InputTransform } from '@angular/core';

// 定义一个转换器，将输入值转为字符串
const stringTransform: InputTransform = {
  transform: (value: unknown) => String(value)
};

@Component({
  selector: 'my-component',
  templateUrl: './component.html'
})
export class MyComponent {
  // 给Input添加转换器配置
  @Input({ transform: stringTransform }) anyattribute: string;
  
  constructor(){}
}

这样一来，当你写[anyattribute]="MyLabel"时：

• 如果你的组件类里定义了MyLabel变量，会使用变量的值；
• 如果只是想传递字符串字面量，这种方案更适合需要同时支持动态变量和静态字符串的场景，而纯静态字符串传递还是方案一更直接。

总结一下：如果只是传递静态字符串，直接去掉方括号就可以实现你想要的写法，不需要额外配置组件；如果有动态需求，再考虑用转换器的方式。

内容的提问来源于stack exchange，提问作者Rafael de Castro