Question

我正在尝试从另一个组件调用一个组件方法。我已经创建了该组件的实例并调用了它的方法，但是它似乎没有触发。如果您在下面看到我正在调用this.termComponent.getTermsDetails（）;

比较1

 saveFundClass() {
             this.termsService.createFundClass(this.FundClass).then((result ) => {
                if (result) {
                     this.termComponent = new TermsComponent(this.termsService);
                    this.notify.success('Fund Class Successfully Created');
                    this.termComponent.getTermsDetails();
                }
            }) .catch(err => {
                if (err.status === 409) {
                    this.notify.error('Fund Class with same name already exist for the given fund');
                } else if (err.status === 400) {
                    this.notify.error('Please ensure the LegalFundClass and Description are entered before saving');
                } else {
                    this.notify.error('An Error Has Occured While adding Classification Overrides Details');
                }
            });
    }

组件2

constructor(private termsService: TermsService) { }

public getTermsDetails() {
    if (this.ManagerStrategyId != null) {
        this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
            this.TermDetails = data;
            this.OriginalList = JSON.parse(JSON.stringify(data));
            this.FundClasses = this.TermDetails.FundClassViewModel;
            this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;
            this.FundTerms = this.TermDetails.FundTermsViewModel;
            this.Funds = this.TermDetails.LegalFundClassViewModel.Funds;
            this.FundClassType = this.TermDetails.LegalFundClassViewModel.FundClassType;
            this.FirmFunds = this.TermDetails.LegalFundClassViewModel.FirmFunds;

            this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail=> {
                funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
                    .reduce((prev, next) => prev = prev.concat(next), [])
                    .filter(obj => obj.InvestedAmount !== null);
            });

           this.TermDetails.LegalFundClassViewModel.LegalFundClassDetailsViewModel = this.TermDetails
                                                                                         .LegalFundClassViewModel
                                                                                         .LegalFundClassDetailsViewModel
                                                                                         .filter(obj => obj.InvestmentStatusId === 1);
        });
    }
}

Answer 1

您需要使用@Viewchild

假设TermComponent是您的子组件

比较1

TS：

@ViewChild('termComponent') termComponent: TermComponent;

this.termComponent.getTermsDetails();

HTML：

<child-component #termComponent></child-component>

Answer 2

我假设组件结构为

TermComponent -> ParentComponent -> Component1

要从Component1调用TermComponent的方法，可以执行以下任一操作，

从Component1发出事件，该事件在实习生中在ParentComponent中发出另一个事件，最终将导致调用TermComponent的方法。
您可以使用ngRx / store进行状态管理。您可以在TermComponent中订阅状态更改，一旦状态更改，就可以调用该方法。

通过另一个组件的实例从另一个组件调用一个组件方法不起作用

2 个答案: