typescript - 从子到父的简单绑定
问题描述
我必须从 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>
所以问题是,如果我在儿童表格中手动写入(或删除),父亲只会得到更新,在此先感谢。
解决方案
推荐阅读
- angular - Ionic Angular:人为地创建一个虚假的页面导航历史
- animation - 如何在搅拌机中移动或动画混合对象
- html - 目录的语义标记和 ARIA 属性?
- sql - Postgres 的 BETWEEN 语句中的 EOMONTH() 替代项
- sparql - 在 GraphDB 中使用 SPARQL 和服务从 DPBEDIA 查询数据
- javascript - 如何在javascript中实现异步功能
- javascript - 如何在 React 中同步操作或者说如何让 react js 代码逐行运行?
- .net - Powershell - 剪切、合并和简化文件中的行
- swiftui - 附加 .simultaneousGesture 时,SwiftUI 文本字段停止事件以触发 NavigationLink
- c++ - 为什么 for 循环中的异步不能提高执行时间?