Html 从另一个组件调用函数时,函数中的对象未执行
对不起,我没能恰当地为我的问题命名。 让我好好解释一下我的问题。 我有两个组件,比如A和B。 在B中,我有一个函数Html 从另一个组件调用函数时,函数中的对象未执行,html,angular,typescript,Html,Angular,Typescript,对不起,我没能恰当地为我的问题命名。 让我好好解释一下我的问题。 我有两个组件,比如A和B。 在B中,我有一个函数saveIndCustData,用于发送和保存数据 export class CustomerformComponent implements OnInit { @Output() savedIndCustomer: EventEmitter<any> = new EventEmitter<any>(); saveIndCustData() { const s
saveIndCustData
,用于发送和保存数据
export class CustomerformComponent implements OnInit {
@Output()
savedIndCustomer: EventEmitter<any> = new EventEmitter<any>();
saveIndCustData() {
const savedIndCustomer = {
prefix: this.prefix,
nameType: this.indCustNameType,
firstName: this.firstName,
middleNAme: this.middleName,
lastName: this.lastName,
gender: this.gender,
dateOfBirth: this.parseDate(this.dateOfBirth.toString()),
citizenship: this.citizenship
};
this.savedIndCustomer.emit(savedIndCustomer);
this.snackbar.open('Customer Info Saved,Click on Next', 'Close', {
duration: 5000
});
}
}
我将数据发送到服务类中
@Output()
savedIndCustomer: EventEmitter<any> = new EventEmitter<any>();
我的问题是,如果我从组件B调用saveIndCustData
函数,它将数据推送到数组constsavedindcustomer{…}
,并调用服务类。
但是,当我从组件A调用同一个函数时,它不会调用saveIndCustData()
函数中的const savedIndCustomer{…}
方法,而服务类方法不会将数据保存在数组中,而是简单地显示snakbar。
问题是什么?假设您将组件B放在组件A的html中,那么您应该像这样引用组件B A.component.html:
...
<B #bcmp></B>
...
您的代码结构不标准。不能在另一个组件中插入组件。另外,您试图直接在服务中访问组件,这不是一个好方法。因此,您能告诉我正确的方法吗?我没有在组件a中引用组件B的html。我只想从组件a调用函数。
public addDynamiIndCustomerComponent() {
const factory = this.factoryResolver.resolveComponentFactory(CustomerformComponent);
const component = factory.create(this.rootViewContainer.parentInjector);
component.instance.savedIndCustomer.subscribe(data => {
console.log(data);
// Insert Individual Customer Type
this.custFullDetails.customerType = 'individual';
this.custFullDetails.individualCustomer.dateOfBirth = data.dateOfBirth;
this.custFullDetails.individualCustomer.citizenship = data.citizenship;
this.custFullDetails.individualCustomer.gender = data.gender;
this.custFullDetails.individualCustomer.individualName.push({
prefix: data.prefix,
firstName: data.firstName,
middleName: data.middleName,
lastName: data.lastName,
agreementId: data.agreementId,
nameType: data.nameType
});
console.log(this.custFullDetails.individualCustomer);
});
this.rootViewContainer.insert(component.hostView);
}
...
<B #bcmp></B>
...
@Component({
selector: 'A',
templateUrl: './A.component.html',
styleUrls: ['./A.component.scss']
})
export class AComponent implements OnInit {
@ViewChild("bcmp") bcmp : B
ngOnInit(): void {
// by this way you can use any method existant in B component
this.bcmp.saveIndCustData();
}
}