标签: angular2-custom-component

我正在创建一个组件.由于我喜欢Apache Wicket的做事方式,我试图模仿IModel传递数据的方式.为此,我向子组件传递一个模型和回调,它可以提取相关值,而不是调用函数来预先获取数据.

问题是,新设置的模型的处理使用回调.因此,如果在设置回调之前调用模型设置器,则Angular会崩溃.
解决方法:推迟需要回调的操作ngAfterViewInit()等.

简而言之:

• 如何控制@Inputs的设置顺序？
• 我可以依赖源代码中的顺序吗？

示例:(在此处更改订单似乎可以完成工作)

@Input()
valueCallback: (item: any) => string
    = app => { throw new Error("valueCallback not yet defined."); };

@Input()
labelCallback: (item: ItemType) => string;

使用该子组件的模板:(此处更改订单不会更改订单)

            <wu-checkboxes [groupName]="'includedApps'"
                           [options]="availableApps"
                           [valueCallback]="appsValueCallback"
                           [labelCallback]="appsLabelCallback"
            >

正如我在上面提到的,Angular2似乎遵循@Input类成员的顺序并按顺序设置/调用它们.问题是,这是事实还是法律上的？我不想依赖那些可行的功能,因为它目前以这种方式编码.我对JavaScript反射知之甚少,所以我无法分辨这是否会在任何地方发挥作用.

我正在尝试使用 Reative Form 创建一个自定义输入组件，Angular 7但我无法将事件传递到输入字段。

我component有一个标签和一个输入字段以及一个特定的布局。我component html看起来像这样：

<div id="customInputGroup"  [formGroup]="parentFormGroup" [ngClass]="{'input-value': hasValue()}">
    <label [for]="inputId">{{label}}</label>
    <input [id]="inputId"  [name]="inputName"  class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">
</div>

而在我的Component：

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {


  @Input('placeholder') placeholder = '' ;
  @Input('label') label = '';
  @Input('inputId') inputId = '';
  @Input('inputName') inputName = '';
  @Input('parentFormGroup') parentFormGroup:FormGroup;
  @Input('mask') mask;
  constructor() { }

  ngOnInit() {
  }

  hasValue(){
    return (this.parentFormGroup.get(this.inputName).value != undefined …

我的自定义组件click功能被触发两次 - 触发自定义组件的事件和样本级别事件.

这是我的Plunker:

https://plnkr.co/edit/wp2iWh7OStdPm5uXsWbP?p=preview