Добавление действующего свойства цвета в мой пользовательский ионный компонент

Question

Я пытаюсь создать свой собственный компонент в Ionic, который позволяет мне устанавливать свойство цвета текста внутри него. Я пытался использовать функциональность, предоставляемую в ионном ядре, чтобы иметь возможность добавить свойство цвета. При поиске исходного кода мне предложили попробовать использовать функцию createColorClasses, однако оказалось, что эта функция не раскрыта. Мне интересно, есть ли альтернативный метод без, который не требует написания большого количества кода.

Answer 1

Вы можете сделать что-то вроде этого:

parent.component.ts

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})

export class ParentComponent {
  label: string = "Click me"
  color: string = "blue" // Or could be a hex color as string
  constructor() {}

  functioncall(event) {
    console.log('functioncall', event);
  }
}

parent.component.html

<app-button [color]="color" (onClick)="functioncall($event)" [label]="label"></app-button>

app-buton.component.ts

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html'
})

export class ButtonComponent {
  @Input() color: string;
  @Input() label: string;
  @Output() onClick = new EventEmitter<any>();

  constructor() {}

  onClickButton(event) {
    this.onClick.emit(event);
  }
}

app-buton.component.html

<div id="button">
  <button [ngStyle]="{'color': color}" type="button" (click)="onClickButton($event)">
    {{ label }} {{color}}
  </button>
</div>

Это всего лишь пример, но вы можете использовать компонент app-button и передавать больше параметров цветов или чего-либо еще для стиля и класса, для получения дополнительной информации см .: https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/