Мне нужно передать данные из дочернего компонента и родительского компонента в 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>
Так что проблема в том, что отец получает обновления только в том случае, если я пишу (или удаляю) вручную в детской форме, заранее спасибо.