Передача входных параметров динамически в угловом шаблоне - PullRequest
Новая
       33

Передача входных параметров динамически в угловом шаблоне

0 голосов
/ 29 января 2019

У меня 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) после этого.

1 Ответ

0 голосов
/ 29 января 2019

Вы можете просто пропустить весь объект и сделать что-то вроде следующего:

Сначала объявите интерфейс и сделайте свойства необязательными: 

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

...