使用多个@input()装饰器- ionic 4
使用多个@input()装饰器- ionic 4
提问于 2019-11-06 23:06:04
我在运行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>`回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-06 23:14:07
您可以根据需要设置任意数量的输入：
父html：
<control-messages
[control]="saveUserForm.get('age')"
color="success">
</control-messages>子T：
export class ControlMessagesComponent {
@Input() control: FormControl;
@Input() color: string;子html：
template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`但是，如果你从你的formControl检查success | warn | danger，就不需要从父母那里发送。
Stack Overflow用户
发布于 2019-11-06 23:15:38
您可以根据需要添加任意数量的输入，例如：
@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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58733090
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号