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

- Mohamed Abubakar

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内部的一个方法。

- Gynteniuxas

---

我已经尝试过这种方法，但是它不可行。 - Mohamed Abubakar

你说的“不可实现”是什么意思？是由于技术限制、错误等原因吗？ - Gynteniuxas

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();
  }
}

- Salahuddin Ahmed

---

在我的父组件中，我还有菜单和加载器代码，因此我无法使用字符串选择器。 - Mohamed Abubakar

@SalahuddinAhmed 我也在等待OP的结果！你有一个很好的记录方法，这也是我从Angular文档中信任的方法。 - Doug Chamberlain

@Salahuddin Ahmed：我也尝试了使用类型选择器，但还是不起作用。 - Mohamed Abubakar