在Angular中如何从子组件调用父组件的方法

Question

我在子组件中有一个方法如下:

showAcknowledgement() {
this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
data.data.filter((res: any) => {
if (data.isSuccessful === true) {
this.noticeText = res.noticeText;
this.noticeAttachment = res.noticeAttachement;
this.noticeCode = res.noticeCode;
} else if (data.isSuccessful === false) {
this.message = [{ field: "", message: data.message[0].message }];
this.objError = this.message;
this.showError = true;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
})
});
}

我需要在ngOnInit()中的父组件中调用此方法，因为当页面加载时我需要调用该方法。我试过像下面这样，但它不工作

父HTML:

<app-acknowledge-notice-modal #child></app-acknowledge-notice-modal>

父TS:

@ViewChild(AcknowledgeNoticeModalComponent, {static : true}) child : AcknowledgeNoticeModalComponent;

ngOnInit() {
this.child.showAcknowledgement();
}

Answer 1

@Output()在子组件(https://angular.io/guide/inputs-outputs)

这不是直接的方法调用，但很常见。在你的例子中，它可以是这样的:

父HTML:

<app-acknowledge-notice-modal (someEvent)=someMethod()></app-acknowledge-notice-modal>

子TS:

@Output() someEvent = new EventEmitter<string>();

someEvent在父级HTML和子级TS中必须匹配，而someMethod()是父级TS中的方法

Answer 2

你能这样试试吗?

使用类型选择器:

子组件

@Component({
selector: 'app-acknowledge-notice-modal',
template: <div>...</div>
})
class AcknowledgeNoticeModalComponent{
showAcknowledgement() {
this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
data.data.filter((res: any) => {
if (data.isSuccessful === true) {
this.noticeText = res.noticeText;
this.noticeAttachment = res.noticeAttachement;
this.noticeCode = res.noticeCode;
} else if (data.isSuccessful === false) {
this.message = [{ field: "", message: data.message[0].message }];
this.objError = this.message;
this.showError = true;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
})
});
}
}

父组件

@Component({
selector: parent-component,
template: <app-acknowledge-notice-modal></app-acknowledge-notice-modal>,
directives: [AcknowledgeNoticeModalComponent]
})
class ParentComponent{
@ViewChild(AcknowledgeNoticeModalComponent) child: AcknowledgeNoticeModalComponent;
ngAfterViewInit() {        
this.child.showAcknowledgement();
}
}

使用字符串选择器:

子组件

@Component({
selector: 'app-acknowledge-notice-modal',
template: <div>...</div>
})
class AcknowledgeNoticeModalComponent{
showAcknowledgement() {
this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
data.data.filter((res: any) => {
if (data.isSuccessful === true) {
this.noticeText = res.noticeText;
this.noticeAttachment = res.noticeAttachement;
this.noticeCode = res.noticeCode;
} else if (data.isSuccessful === false) {
this.message = [{ field: "", message: data.message[0].message }];
this.objError = this.message;
this.showError = true;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
})
});
}
}

父组件

@Component({
selector: parent-component,
template: <app-acknowledge-notice-modal #child></app-acknowledge-notice-modal>,
directives: [AcknowledgeNoticeModalComponent]
})
class ParentComponent{
@ViewChild('child') child: AcknowledgeNoticeModalComponent;
ngAfterViewInit() {        
this.child.showAcknowledgement();
}
}