Angular 使用多个@input（）修饰符-ionic 4

我正在运行一个ionic 4应用程序

我创建了一个消息组件，它根据作为

@Input

传递给它的错误进行加载

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

如何通过父级发送另一个参数以作为

{{{color}}

加载到其模板中，如

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

模板：`
{{errorMessage}
`

您可以设置任意数量的输入：

父html：

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

子html：

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

模板：`
{{errorMessage}
`

---

但是，如果您正在检查formControl中的

成功|警告|危险

，则无需从父级发送它。

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

@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;
 ...

@组件({
选择器：“控制消息”，
模板：`
{{errorMessage}
`
})
导出类控制消息组件{
@Input（）控件：FormControl；
@Input（）颜色：字符串；
...

用法：

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

为什么第一个装饰器与

[]

匹配，而第二个装饰器与之不匹配？我认为这是我犯的错误，装饰器之间没有相互关联。@MatheusBatista因为

[color]=

需要一个对象，而像

color

这样的简单输入需要一个字符串。但是当你仍然无法将它与

[]匹配时

像这样的

[color]=“'red'”

@MatheusBatista谢谢，我不明白他的问题。看到了吗

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