在属性上使用输入和输出装饰器时获取事件对象答案

【问题标题】：getting event object while using input and output decorators on properties在属性上使用输入和输出装饰器时获取事件对象
【发布时间】：2018-12-14 01:04:23
【问题描述】：

在属性上使用 @input 和 @output 装饰器时，我得到了一个事件对象以及输出属性上的传递对象，并且一个事件对象复制了传递的对象。

这是我的代码。

在父组件中是。

<example [focusOn]="focusOnExample" (change)="checkExampleData($event)"></example>

checkExampleData(example: any){   
    this.starSign = example;  
}

而我的子组件是

<input type="checkbox" class="custom-control-input" (click)="isExampleClicked($event.target.checked)">

<input type="text" #myInput class="form-control" style="text-transform: uppercase"  formControlName="exxampleNo" [readonly]="!showHide"
                    (keyup)="formResponse(myForm)">



@Component({
    selector: 'example ',
    templateUrl: './child.html',
    styleUrls: ['./child.css']
})
export class ExampleComponent implements OnInit {

    public myForm: FormGroup;
    public showHide: boolean = true;
    public exampleData = {
        exampleValue: "",
        exampleValid: false
    }

    @Input() focusOn: boolean;
    @Output() change: EventEmitter<any> = new EventEmitter<any>();

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.addValidationOnExample();        
    }

    addValidationOnExample() {
        this.exampleData .exampleValid = false;
        this.myForm = this.fb.group({
            panNo: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]]
        });
        this.sendOutput(this.exampleData)
    }

    removeValidation() {
        this.exampleData.exampleValid = true;
        this.myForm = this.fb.group({
            panNo: []
        });
        this.sendOutput(this.exampleData);
    }

    isExampleClicked(value: boolean) {
        this.exampleData.exampleValue = "";
        if (value) {
            this.showHide = false;
            this.removeValidation();                                    
        } else {
            this.showHidePan = true;
            this.addValidationOnExample();
        }
    }

    formResponse(formData: any) {
        if (formData.valid) {
            this.exampleData.exampleValue = formData.value.exxampleNo;
            this.exampleData.exampleValid = formData.valid;
            this.sendOutput(this.exampleData)
        }else{
            this.exampleData.exampleValue = "";
            this.exampleData.exampleValid  = formData.valid;
            this.sendOutput(this.exampleData)  
        }
    }

    sendOutput(exampleData){
        this.change.emit(exampleData);
    }


}

当我检查父组件中的 checkExampleData 函数时，我在这里得到了两个对象（传递对象和事件对象）。这也将 this.starSign 值作为事件对象而不是 exampleData 发出。

【问题讨论】：

标签： angular typescript angular2-forms angular2-directives

【解决方案1】：

发生这种情况是因为您使用了名称 change，默认情况下，该名称由 Angular 定义，用于更改事件。

您必须使用其他名称而不是 change。

【讨论】：

欢迎！ @瑞奇

【解决方案2】：

这样使用，event.target.value

checkExampleData(example: any){   

        this.starSign = example.target.value;  
    console.log("value",this.starSign);
    }

这就是你得到的所有正确数据。每当使用事件时，您必须使用 event.target.value。

试试这个，然后告诉我。

【讨论】：