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。

让我们尝试一次，让我知道。

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

2 个答案: