Question

通过正确，我的意思是它的行为就像普通的html5控件一样。例如，在我的具体情况下，我尝试创建一个自定义提交按钮。此自定义提交按钮在提交表单时显示加载图标。所以为此，我在控件的模板中完成了这个：

<button type="submit" class="btn btn-primary" [ngClass]="{disabled: disabled || submitting}" [disabled]="disabled || submitting">
<span *ngIf="submitting"><i class="glyphicon glyphicon-refresh spinning"></i></span>
{{displayText}}

代码：

import { Component, Input, EventEmitter, OnInit} from 'angular2/core';

@Component({

    selector: 'submit-button',
    templateUrl: 'app/shared/submit-button/submit-button.html',
    styleUrls: ['app/shared/submit-button/submit-button.style.css']
})

export class SubmitButtonComponent {

    @Input() submitting: boolean = false;
    @Input() displayText: string = 'Submit';
    @Input() disabled: boolean = false;
}

然后我就这样做了：

<submit-button [submitting]="submitting" [disabled]="!myForm.form.valid" [displayText]="'Submit'"></submit-button>

请参阅我将“禁用”属性从组件本身映射到模板内部控件的方式？好吧，我不确定这是正确的方法，因为我必须为每个控件属性执行此操作。我在这里要问的是：有没有办法将我使用组件时设置的属性无缝映射到组件内部的内部控件？

例如，如果我有一个文本输入而不是按钮，我想根据需要设置它。它不起作用，因为所需的不在组件内部的输入中，而是在组件标签本身上。

提前致谢。

Answer 1

您必须为每个属性创建一个@Input()并将其单独绑定到内部控件。目前没有别的办法。当他们试图找出如何最好地创建自定义输入元素和其他表单控件时，Angular2 Material团队也在努力解决这个问题。

如何在Angular 2上正确实现自定义控件

1 个答案: