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

【问题标题】：Using more than one @input() decorator - ionic 4使用多个 @input() 装饰器 - ionic 4
【发布时间】：2020-03-03 02:39:27
【问题描述】：

我正在运行 ionic 4 应用程序

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

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

所以它会加载FormControl 验证并显示它的自定义消息，正如我在它的服务中定义的那样；

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

这是组件：

  @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>`

【问题讨论】：

标签： angular ionic4

【解决方案1】：

您可以根据需要设置任意数量的输入：

父 html：

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

子 ts：

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

子 html：

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

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

【讨论】：

为什么第一个装饰器使用[]，而第二个没有？我相信那是我犯的错误
装饰器之间没有关联。
@MatheusBatista 因为[color]= 需要一个对象，而像color 这样的普通输入需要一个字符串。但是当你仍然不能像这样[] 使用它时[color]="'red'"
@MatheusBatista 谢谢，我不明白他的问题。见stackoverflow.com/questions/43633452/…

【解决方案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>

【讨论】：