使用多个 @input() 装饰器 - ionic 4

Question

我是运行 ionic 4 应用程序

我创建了一个消息组件，它根据作为 @Input 传递给它的错误进行加载。

<control-messages [control]="saveUserForm.get('age')"></control-messages>

因此它加载 FormControl 验证并显示它的自定义消息，如我在其服务中定义的那样；

我想知道的是，如果有某种方法可以向组件发送多个属性，我想用 success | warn | danger[= 动态装饰 <p class='help'></p> 18=]

这是组件：

  @Component({
    selector: 'control-messages',
    template: `<p class="help" *ngIf="errorMessage !== null">{{errorMessage}}</p>`
  })
  export class ControlMessagesComponent {
    @Input() control: FormControl;

    constructor() { }

    get errorMessage() {
      for (const propertyName in this.control.errors) {
        if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
          return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
        }
      }
      return null;
    }
  }

我如何通过父级发送另一个参数以加载到它的模板中作为 {{color}}，例如

    template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`

Answer 1

你可以任意设置输入：

parent html:

<control-messages 
    [control]="saveUserForm.get('age')"
    color="success">
</control-messages>

child ts:

export class ControlMessagesComponent {
    @Input() control: FormControl;
    @Input() color: string;

child html:

template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`

但是，如果您从 formControl 检查 success | warn | danger，则无需从 parent 发送它。

Answer 2

您可以添加任意数量的输入，例如：

@Component({
    selector: 'control-messages',
    template: `<p class="help" [style.color]="color" *ngIf="errorMessage !== null">{{errorMessage}}</p>`
  })
  export class ControlMessagesComponent {
    @Input() control: FormControl;
    @Input() color: string;
 ...

用法：

<control-messages 
    [control]="saveUserForm.get('age')"
    color="red">
</control-messages>

使用多个 @input() 装饰器 - ionic 4

Using more than one @input() decorator - ionic 4

angular

ionic4