將數據從子項發送到父組件

Question

我的子組件上有一個按鈕，應該向其父組件發送信息，但此按鈕不發送此信息。我可能錯過了一些東西，但我仍然沒有注意到它。

下面是從我的子組件內的按鈕的代碼（有兩個按鈕：selectPessoaJuridica和selectPessoaFisica：

import { Component, Input, Output, EventEmitter} from '@angular/core'; 
import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import {FinalizaDisputaService} from '../services/finaliza-disputa.service'; 
import {FinalizaDisputaComponent} from './finaliza-disputa.component' 

@Component({ 
    moduleId: module.id, 
    selector: 'titular', 
    templateUrl: 'dados-titular.component.html' 
}) 
export class TitularComponent { 
    // we will pass in address from App component 
    @Input('group') 
    public titularForm: FormGroup; 
    @Input() submitted:any; 
    @Input() indexNumber:any; 
    @Output() modelChanged = new EventEmitter<boolean>(); 
    public isJuridica = false; 
    classe = { 
    pessoa_fisica: 'selected', 
    pessoa_juridica: '' 
    }; 

    constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaDisputaService) {} 

    selectPessoaFisica(e:boolean){ 
    e = false; 
    this.classe.pessoa_fisica = "selected"; 
    this.isJuridica = false; 
    this.classe.pessoa_juridica = ""; 
    this.modelChanged.emit(e) 
    } 

    selectPessoaJuridica(e:boolean){ 
    e = true; 
    this.classe.pessoa_fisica = ""; 
    this.classe.pessoa_juridica = "selected"; 
    this.isJuridica = true; 
    console.log("ativou", e) 
    this.modelChanged.emit(e); 
    } 
} 

那麼，這是什麼應該做的是通知家長認爲e現在假

。

這是從父組件的HTML：

<titular (modelChanged)="recebeValidators($event)" [indexNumber]="indice" [submitted]="submitted" [group]="formDadosBancarios.controls.dados_titular.controls[i]"></titular> 

這是從父組件的代碼我應該在哪裏收到e（recebeValidators）值：

import { Component, OnChanges, OnInit, Input } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule, AbstractControl, ValidatorFn } from '@angular/forms'; 
import { FinalizaDisputaService } from '../services/finaliza-disputa.service'; 
import {DisputaService} from '../../disputas/services/disputas.service'; 
import { dadosAcordo } from '../model/dados-acordo.interface'; 
import { TitularComponent } from './dados-titular.component'; 
import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'detalhes', 
    templateUrl: `finaliza-disputa.component.html`, 
    providers: [FinalizaDisputaService] 
}) 

export class FinalizaDisputaComponent implements OnInit { 
    public dados: dadosAcordo; 
    disputa:any; 
    public formDadosBancarios: FormGroup; 
    public submitted: boolean; 
    public events: any[] = []; 
    public servError: any; 
    public indice = 0; 
    public loading = false; 
    soma = 0; 
    public servSuccess: any; 
    @Input() e:boolean; 
    cpf_REGEXP = /^\d+$/; 

    constructor(private _fb: FormBuilder, private service:DisputaService, private finalizaAcordo: FinalizaDisputaService, 
    private route:ActivatedRoute, private router:Router) {} 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     let id = params['id']; 
     this.service 
     .buscaPorId(id) 
     .subscribe(disputa => { 
      this.disputa = disputa; 
      console.log(disputa.campanha); 
      console.log(this.disputa.propostas_realizadas); 
     }, 
     erro => console.log(erro)); 
    }) 

    this.formDadosBancarios = this._fb.group({ 
     id: [''], 
     termos_condicoes: [false, Validators.requiredTrue], 
     dados_titular: this._fb.array([ 
     this.initTitular() 
     ]) 
    }) 
    } 
    /** 
    * initTitular- Inicializa o grupo de formulário dinâmico e suas validações 
    * @returns '' 
    */ 
    initTitular() { 
    return this._fb.group({ 
     titular: ['', [<any>Validators.required, <any>Validators.minLength(3)]], 
     cnpj: [''], 
     cpf: ['', <any>Validators.required], 
     data_nasc: ['', <any>Validators.required], 
     agencia: ['', <any>Validators.required], 
     banco: ['', <any>Validators.required], 
     conta: ['', <any>Validators.required], 
     tipo: ['', <any>Validators.required], 
     pessoa_juridica: [false], 
     valor_deposito: [''] 
    }) 
    } 
    // this is where I receive e 

    recebeValidators(model: dadosAcordo, e: any) { 
    console.log("test", e); 
    const array = <FormArray>this.formDadosBancarios.get('dados_titular'); 
    const cpf = array.at(this.indice).get("cpf"); 
    const cnpj = array.at(this.indice).get('cnpj'); 
    const data_nasc = array.at(this.indice).get('data_nasc'); 
    const cpfCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cpf']); 
    const pessoa_juridicaCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'pessoa_juridica']) 
    const cnpjCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cnpj']); 
    const data_nascCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'data_nasc']); 
    const reqValidators: ValidatorFn[] = [Validators.required, Validators.pattern(this.cpf_REGEXP)]; 
    if (e == true) { 
     data_nascCtrl.clearValidators(); 
     cpfCtrl.clearValidators(); 
     cnpjCtrl.setValidators(reqValidators); 
    }else{ 
     cnpjCtrl.clearValidators(); 
     cpfCtrl.setValidators(reqValidators); 
     data_nascCtrl.setValidators(reqValidators); 
    } 
    data_nascCtrl.updateValueAndValidity(); 
    cpfCtrl.updateValueAndValidity(); 
    cnpjCtrl.updateValueAndValidity(); 
    } 

但不是打印false正在打印undefined。有人能幫我嗎？感謝

Answer 1

看起來你在使用「recebeValidators」函數中的函數參數「e」來遮蔽類屬性。

代碼：

console.log("test", this.e); 

實際上應該是：

console.log("test", e); 

要排除在EventEmitter可能鑄造錯誤的可能性，儘量不要再使用該參數的功能。例如：

selectPessoaFisica(e:any) { 
    e = false; 
    this.modelChanged.emit(e) 
} 

可以改寫爲：

selectPessoaFisica() { 
    this.modelChanged.emit(false); 
} 

還有在接收功能的額外的參數：

此：

recebeValidators(model: dadosAcordo, e: boolean) { 

應該是：

recebeValidators(e: boolean) { 

Answer 2

你應該輸入鑄造它

@Output() modelChanged = new EventEmitter<boolean>(); 

而且你是指一個錯誤的變量，你應該只傳遞一個參數，因爲它是在父組件並刪除該關鍵字

recebeValidators(e: boolean) { 
    console.log("test", e); 
}