如何在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>();

父 HTML 中的someEvent 必须与子 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();
  }
}