Angular：如何向Directive传递对象而非字符串？

这个问题本质是Angular属性绑定的语法使用误区，我给你两种解决方案，优先推荐第一种更规范的方式：

方法一：使用Angular属性绑定语法（推荐） #

你当前模板里直接把对象写成了字符串字面量，Angular会默认把它当作普通字符串传递给指令。要让Angular将其解析为对象，只需要给指令属性加上方括号[]，这样内部的内容会被当作表达式处理：

修改后的模板代码：

<div [my-directive]="{ name: 'Roger', orders: ['apple', 'pie'] }"></div>

指令里的@Input不需要任何修改：

@Input('my-directive') initialData: any;

现在initialData就会是你期望的对象类型了，这是Angular官方推荐的绑定方式，无需额外解析步骤，也避免了JSON解析可能带来的错误。

方法二：通过JSON.parse解析字符串（仅在无法使用属性绑定时使用） #

如果因为某些场景限制（比如动态生成模板字符串）必须用字符串形式传递，那可以通过JSON.parse来转换，但需要注意两个关键点：

1. 模板里的字符串必须符合严格的JSON格式：所有字符串、属性名都必须用双引号包裹。所以你需要调整模板的引号写法（比如用单引号包裹整个属性值，内部用双引号）：

<div my-directive='{ "name": "Roger", "orders": ["apple", "pie"] }'></div>

2. 在指令里解析字符串为对象，推荐用输入属性的setter实时处理，或者在ngOnInit生命周期钩子中解析：

方式A：使用输入属性setter #

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

@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  private _initialData: any;

  @Input('my-directive') set initialData(value: string) {
    try {
      // 尝试解析JSON字符串
      this._initialData = JSON.parse(value);
    } catch (error) {
      console.error('解析initialData失败:', error);
      // 解析失败时设置默认值
      this._initialData = {};
    }
  }

  get initialData(): any {
    return this._initialData;
  }
}

方式B：在ngOnInit中解析 #

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

@Directive({
  selector: '[my-directive]'
})
export class MyDirective implements OnInit {
  @Input('my-directive') initialData: string;
  parsedData: any;

  ngOnInit(): void {
    try {
      this.parsedData = JSON.parse(this.initialData);
    } catch (error) {
      console.error('initialData不是有效的JSON:', error);
      this.parsedData = {};
    }
  }
}

需要注意的是，这种方法存在风险：如果模板里的字符串格式不符合JSON规范，会抛出解析错误，所以一定要做好错误处理。

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