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'
      )
    );
  }
}

我想动态地设置这些参数。我希望将任何输入传递到more-options-menu都直接转到my-icon组件。 more-options-menu是my-icon的包装器组件。我正在尝试查看是否可以包装my-icon组件，这样就不必在每次更新more-options-menu组件时都更新my-icon 即提供修复程序，这样我们以后就不必对其进行更新（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'}

编辑：

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

请参阅此堆叠闪电战：https://stackblitz.com/edit/angular-ohua5z

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

1 个答案: