Angular - JSX 和模板文字中的转义变量以将其用作参数答案

【问题标题】：Angular - Escaping variable in JSX and template literal to use it as parameterAngular - JSX 和模板文字中的转义变量以将其用作参数
【发布时间】：2021-12-27 21:56:17
【问题描述】：

我目前正在使用 JSX 模板，我向模板声明了一个本地数据变量，并尝试将其作为参数传递给我在 Angular 属性之一中导出的组件。问题是 JIT 编译器将我标记为解析错误，好像在模板文字中以这种方式转义数据是不正确的。代码如下：

const data = [
  {
    fontIcon: 'settings',
    action: () => { return alert(1) }
  },
  {
    fontIcon: 'favorite',
    action: () => { return alert(2) }
  }
]

export const MenuExpansionPanel = {
  render: (args: Interface) => ({
    props: args,
    template: `
      <ui-kit-menu-expansion-panel
      title="Menu title"
      [disabled]="false"
      [expanded]="true"
      [hideToggle]="false"
      togglePosition="after"
      [draggable]="false"
      [icons]="${data}"
      >
        Content
      </ui-kit-menu-expansion-panel>
    `
  })
}

还有错误：

如果您知道如何解决它，请不要犹豫。谢谢！

【问题讨论】：

标签： angular jsx storybook

【解决方案1】：

解决方案是：

export const MenuExpansionPanel = {
  render: (args: Interface) => ({
    props: {
      data: [
        {
          'fontIcon': 'settings',
          'action': () => {
            return alert('Settings icon clicked!')
          }
        },
        {
          'fontIcon': 'favorite',
          'action': () => {
            return alert('Favorite icon clicked!')
          }
        }
      ],
      ...args
    },
    template: `
              <ui-kit-menu-expansion-panel
              title="Menu title"
              [disabled]="false"
              [expanded]="true"
              [hideToggle]="false"
              togglePosition="after"
              [draggable]="false"
              [icons]="data"
              >
                Content
              </ui-kit-menu-expansion-panel>
            `
        })
    }

【讨论】：