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

Question

在属性上使用@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 发出。

Answer 1

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

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

Answer 2

这样使用，event.target.value

checkExampleData(example: any){   

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

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

让我们试试这个，让我知道。

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

getting event object while using input and output decorators on properties

angular

typescript

angular2-forms

angular2-directives