Tengo un método en el componente Child como el siguiente:
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' }); } }) }); }Necesito llamar a este método en el componente principal dentro de ngOnInit() porque mientras se carga la página necesito llamar a ese método. Intenté como a continuación pero no funciona
HTML principal:
<app-acknowledge-notice-modal #child></app-acknowledge-notice-modal>Padre TS:
@ViewChild(AcknowledgeNoticeModalComponent, {static : true}) child : AcknowledgeNoticeModalComponent; ngOnInit() { this.child.showAcknowledgement(); }Con @Output() dentro del componente secundario ( https://angular.io/guide/inputs-outputs )
No es una llamada de método directo, sino algo bastante común. Entonces, en tu caso podría ser algo como esto:
HTML principal:
<app-acknowledge-notice-modal (someEvent)=someMethod()></app-acknowledge-notice-modal>Niño TS:
@Output() someEvent = new EventEmitter<string>(); someEvent en el HTML de los padres y el TS del niño deben coincidir, mientras que someMethod() es un método dentro del TS de los padres
¿Puedes intentarlo así?
Uso del selector de tipo:
Componente hijo
@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' }); } }) }); } }Componente principal
@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(); } }Usando el selector de cadena:
Componente hijo
@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' }); } }) }); } }Componente principal
@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(); } }