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

Question

我目前正在使用 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>
    `
  })
}

和错误：

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

标签： angularjsxstorybook

Answer 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>
            `
        })
    }