javascript - 在 javascript/JQuery 中访问 Angular 函数

Question

编码方面的新手，所以我不知道它是哪种语言。我有一个包含函数的 component.ts 文件。在ngOnInit()中，我写了一部分Js依赖的代码。我试图在这个 js block 中访问在 ngOnInit() 之外编写的函数。

尝试使用 this.openDialog() 访问该函数，但只是显示错误，说它未定义。

尝试通过创建组件的对象并尝试调用函数来在 js 中定义函数本身，

constructor(public dialog: MatDialog, private datePipe: DatePipe) {

  }
ngOnInit(){
var testVar = new testComponent(dia, date);
//dia, date are respective constructor params
}

很确定那是不合适的，但试过了。

组件.ts:

export class test implements OnInit{
openDialog(){
//this is mat angular dialog
}
ngOnInit(){

 document.addEventListener('DOMContentLoaded', function () {

// trying to call the above openDialog here. 
});
}

}

尝试在 document.addEventListener() 中调用对话框；转换 document.addEventListener(); 不是一个选项。如果我可以在内部调用该对话框，将会有所帮助。

编辑 1共享更多代码，以获取信息:

document.addEventListener('DOMContentLoaded', function () {
      var events = []

      var calendarEl = document.getElementById('calendar');

      var calendar = new Calendar(calendarEl, {
        eventLimit: true, // for all non-TimeGrid views
        views: {
          dayGridMonth: {
            eventLimit: 5 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        themeSystem: 'bootstrap',
        businessHours: {
          daysOfWeek: [1, 2, 3, 4, 5],
          startTime: '00:00',
          endTime: '24:00',
        },
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'dayGridMonth,listView,timeGridWeek,timeGridDay'
        },
        plugins: [dayGridPlugin, interactionPlugin, listPlugin, bootstrapPlugin, timeGrigPlugin],
        eventOverlap: false,
        displayEventTime: false,
        eventClick: function (info) {
          this.curEvnt = info;
          console.log(this.curEvnt)
          this.openDialog(info.event);   //ERROR

        }
      });
    calendar.render();
});

Open dialog 已定义，可以在onInit 中调用，但我正在尝试实现上述代码错误:this.openDialog 不是函数

Answer 1

您可以在 Angular 中使用 Lifecycle Hooks。通过调用其构造函数创建组件/指令后，Angular 在特定时刻按以下顺序调用 lifecycle hook 方法:

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

请引用 Angular 文档:Lifecycle Hooks

class MyComponent implements AfterContentInit {
    openDialog(){
        //this is mat angular dialog
    }

    ngAfterContentInit() {
        this.openDialog()
    }
}