angular - 如何从 Angular 中的另一个组件调用方法？

Question

我正在尝试从一个 Angular 组件调用一个方法到另一个组件

这是one.component.ts，它必须检查是否是休息日

  export class CalendarComponent implements OnInit { 
     isDayOfWeekDisabled(dayOfWeek: number): boolean {
       let dateIsDisabled = false;
       const workDay= 
       moment(this.viewDate).startOf('isoWeek').add(dayOfWeek, 'd');
       this.disabledAreas.forEach((item) => {
      if (item.start.isSame(moment(workDay)) && 
      item.end.isSame(moment(workDay.endOf('day')))) {
      dateIsDisabled = true;
  }
});
return dateIsDisabled;

}

和another.component.ts；如果 day off = true，它不会显示当天的待办事项:

       filterDateInDisabledArea(): boolean {
         for (const disabledArea of this.disabledAreas) {
             if (isDayOfWeekDisabled()) {
              return false;
             }
           }
            return true;
         }

但我不明白如何在这些组件之间创建连接。

Answer 1

这取决于，如果您在同级之间调用，那么您会将方法抽象为一个服务，两者都将使用:

服务

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MruanovaService {
  private subject = null;
  data$ = null;

  constructor(private httpClient: HttpClient) {
    this.init();
  }

  init() {
    this.subject = new BehaviorSubject<any>({});
    this.data$ = this.subject.asObservable();
  }

  getProjects(): void {
    const url = 'https://246gg84zg8.execute-api.us-west- 2.amazonaws.com/prod/projects/';
    const headers = new HttpHeaders({ 'Content-Type': 'text/plain; charset=utf-8' });
    const options = { headers: headers };
    const value = this.httpClient.get(url, options); // HTTP GET
    this.subject.next(value);
  }
}

组件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { MruanovaService } from 'src/app/services/Mruanova.service';

@Component({
  selector: 'app-mruanova',
  templateUrl: './mruanova.component.html',
  styleUrls: ['./mruanova.component.scss']
})
export class MruanovaComponent implements OnInit {
  projects = null;

  constructor(public MruanovaService: MruanovaService) {}

  ngOnInit() {
    this.MruanovaService.getProjects();
    this.MruanovaService.data$.subscribe(res => {
      if (res.subscribe) {
        res.subscribe(response => {
          this.projects = response.Items.sort(function (a, b) {
            return parseFloat(a.ID) - parseFloat(b.ID);
          });
        }, r => {
          console.log('ERROR', r);
        });
      }
    });
  }
}