Простая привязка от ребенка к родителю - PullRequest
0 голосов
/ 26 сентября 2018

Мне нужно передать данные из дочернего компонента и родительского компонента в Angular 5, я сделал эти классы, глядя на какое-то руководство и пытаясь воспроизвести их на plunker (или stackblitz), проблема в том, что мой родительский компонент не 'Обновление с данными о детях, когда я вызываю какую-то детскую функцию, которая заполняет (или нарезает) детскую форму, когда я пишу вручную что-то внутри этих форм, компонент отца корректно обновляется, это детский класс:

import { Component, Input } from "@angular/core";

import * as components from '../../component';

import * as viewModels from "viewmodel";

import * as companyService from "services/component/company.service";
import * as userService from "services/component/user.service";

@Component({
selector: 'user-company',
templateUrl: require('./user-company.component.html'),
providers: [userService.UserService, companyService.CompanyService]
})

export class UserCompanyComponent {

/** Object with form properties sended to father component*/

@Input() CompanySelezionata: viewModels.CompanyViewModel;
@Input() UtenteSelezionato: viewModels.UserViewModel;

private _pIVA: string;
private _userEmail: string;

/** boolean variables for lock-unlock children's forms
private _companyUnlock: boolean;
private _userUnlock: boolean;

/** boolean variables needed for showing some messages on DOM*/
private _hideCompanyMessage: boolean;
private _hideUserMessage: boolean;

/** services for children component */
constructor(private _userService: userService.UserService, private 
_companyService: companyService.CompanyService) {

this.initUser();
this.initCompany();

this._companyUnlock = false;
this._userUnlock = false;

this._hideCompanyMessage = true;
this._hideUserMessage = true;

} 

/** init user object */
 public initUser() {
  this.UtenteSelezionato = new viewModels.UserViewModel();

}

/** init company object */
public initCompany() {
 this.CompanySelezionata = new viewModels.CompanyViewModel();
}


// Call API for searching company(children updated corrctly, father not 
 updated)
public cercaCompany(company: string) {


if (company == undefined || company == "") {
  this.initCompany();
  return;
}
this._companyService.GetByVatCode(company)
  .subscribe((result) => {


    if (result == null) {
      this._companyUnlock = true;
      this._hideCompanyMessage = false;
      this.initCompany();
      this.CompanySelezionata.VatCode = this._pIVA;
      return;
    }
    this.CompanySelezionata = result;
  });

 }

 // Call API for searching user (children updated corrctly, father not 
 updated)
 public cercaUtente(userEmail: string) {

 if (userEmail == undefined || userEmail == "") {

  return this.initUser();
 }

 this._userService.GetByEmail(userEmail)
  .subscribe((result) => {


    if (result == null) {
      this._userUnlock = true;
      this._hideUserMessage = false;
      this.initUser();
      this.UtenteSelezionato.EMail = this._userEmail;
      return;
    }
    this.UtenteSelezionato = result;
  });

  }

  // CLEAN CHILDREN'S FORM, father gets no update when calls it
  public cleanAll() {
   this.cleanUser();
   this.cleanCompany();
 }

 // Clean user's form, called by children it's ok (object updated only in 
   children)
  public cleanUser() {
  this._userEmail = '';
  this._hideUserMessage = true;
  this._userUnlock = false;
  this.initUser();
 }

  // Clean company's form, called by children it's ok (object updated only 
    in children)
   public cleanCompany() {
   this._pIVA = '';
   this._hideCompanyMessage = true;
   this._companyUnlock = false;
   this.initCompany();
 }
 }

ВнутриHTML-файл, я связал поля вроде этого (пример поля компании):

  <label class="k-form-field">
       <span>Nome</span>
       <span class="required">
       <input type="text"  class="k-textbox" name="nomeLegRap" 
       [disabled]="this._companyUnlock == false"
       [(ngModel)]="CompanySelezionata.InformazioniAggiuntive.
       LegaleRappresentante.Nome" />
       </span>
  </label>

Это класс отца:

  import { Component, ViewChild, Input } from "@angular/core";

  import * as viewmodels from "viewmodel";
  import { UserCompanyComponent } from "../../../shared-component";

  @Component({
  selector: 'app-tester-manager',
  templateUrl: require('./tester-manager.component.html'),

  })

  export class TesterManagerComponent {

  currentCompany: viewmodels.CompanyViewModel = new  
  viewmodels.CompanyViewModel();

  currentUser: viewmodels.UserViewModel = new viewmodels.UserViewModel();

  // calls children's methods
  @ViewChild(UserCompanyComponent) childUserCompany: UserCompanyComponent;


  constructor() {

   }
  // Call method cleaning children's form
  public cleanAll() {
  this.childUserCompany.cleanAll();

  }
  }

И, наконец, это отец HTML:

              <!DOCTYPE html>
              <html>
              <head>
                <meta charset="utf-8" />
                <title></title>
              </head>
              <body>

                <p> Componente "Contenitore" di test per altri componenti </p>
                <div class="col-12" id="utilities">
                  <button kendoButton (click)="cleanAll()">Pulisci tutto</button>
                  <button kendoButton (click)="getDati()">Mostra dati</button>

                  <p>
                    In parent - Nome utente: {{currentUser.FullName}}<br />
                    In parent - Nome company: {{currentCompany.Name}}<br />
                  </p>

                </div>

                <div class="row" name="componenteDaTestare">

                  <!-- Inserire QUI il selettore HTML del componente che si vuole testare
                  ricordarsi di dichiarare il componente da testare nel file tester.module sezione "declarations"-->
                  <user-company [(UtenteSelezionato)]="currentUser" [(CompanySelezionata)]="currentCompany"></user-company>

                </div>

              </body>
              </html>

Так что проблема в том, что отец получает обновления только в том случае, если я пишу (или удаляю) вручную в детской форме, заранее спасибо.

...