在角度模板中动态传递输入参数

Posted 2023-02-22

【中文标题】在角度模板中动态传递输入参数

【英文标题】：Passing the input parameters dynamically in angular template

【发布时间】：2019-06-22 08:34:09

【问题描述】：

我有 more-options-menu 角度组件。它的输入参数很少，例如大小、颜色、内联等，我的任何角度选择器看起来都像这样-

<more-options-menu size="40" color="accent"></more-options-menu>

组件看起来像这样-

import Component, OnInit from '@angular/core';
import  MIconRegistry  from '@once/ui';
import  DomSanitizer  from '@angular/platform-browser';

@Component(
  selector: 'more-options-menu',
  template: '<my-icon size svgIcon color inline></my-icon>',
  inputs: ['color', 'svgIcon', 'size', 'inline']
)
export class MoreOptionsMenuComponent implements OnInit 
  size;
  svgIcon;
  color;
  inline;
  constructor(
    private IconRegistry: MIconRegistry,
    private domSanitizer: DomSanitizer
  ) 
    this.IconRegistry.addSvgIconSet(
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://s3.amazonaws.com/hello/135790/20/symbol-defs.svg?8ctxpf'
      )
    );

    this.IconRegistry.addSvgIconSet(
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://s3.amazonaws.com/hello/135790/24/symbol-defs.svg?8ctxpf'
      )
    );
  

我想动态地制作这些参数。我希望传递给更多选项菜单的任何输入都直接转到my-icon 组件。 more-options-menu 是 my-icon 的包装组件。我正在尝试查看是否可以仅包装 my-icon 组件，以便每次更新 my-icon 组件时都不必更新 more-options-menu 即提供一个修复，这样我们之后就不必更新它 (more-options-menu)。

【参考方案1】：

您可以只传递整个对象并执行以下操作：

首先声明一个interface 并使属性可选：

interface IValues
    color?: string;
    svgIcon?: string;
    ...

然后在您的组件中期望该接口类型的输入：

@Input('values') values: IValues;

这现在允许您将任何您想要的对象传递给您的组件 - 只需确保在使用它们之前对所有值进行空检查：

<more-options-menu [values]='valuesIWantToPass'></more-options-menu>

在哪里valuesIWantToPass == color= 'abc'

---

编辑：

从 cmets 直接将其作为输入直接传递到 my-icon。即两个组件上的 @Input('values') values: IValues; 相同，然后是 <my-icon [values]='valuesIWantToPass'></more-options-menu>

查看此堆栈闪电战：https://stackblitz.com/edit/angular-ohua5z

【讨论】：

谢谢@Zze 如何将<more-options-menu [values]='valuesIWantToPass values 传递给my-icon 组件。我不想更改my-icon 的代码。你有什么建议？仅供参考-more-options-menu 是my-icon 的包装器组件。我想看看我是否可以只包装 my-icon 组件，这样我们就不必每次更新 my-icon 组件时都更新 more-options-menu。

我明白你在说什么，但问题是我无法更新 my-icon 组件，在你的情况下是 https://stackblitz.com/edit/angular-ohua5z?file=src%2Fapp%2Fother.component.ts。该文件有 4 个我无法更改的输入

@DineshRawat 好的，您需要更新您的问题以强调这一点，因为目前它说：“这样我们就不必更新” 即提供修复此后我们不必更新它。

编辑了问题中的文字。