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

Question

我有 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)。

Answer 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