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

Posted 2023-02-19

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

【英文标题】：Angular - Escaping variable in JSX and template literal to use it as parameter

【发布时间】：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>
    `
  )

还有错误：

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

【参考方案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>
            `
        )