typescript - Hur man anropar en metod från en annan komponent i Angular?


Jag försöker anropa en metod från en Angular-komponent till en annan

Detta är one.component.ts, det måste kontrollera om det är en ledig dag

  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;

} }

och another.component.ts; om day off=true, visas inte todos för den dagen:

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

men jag kan inte förstå hur man skapar en koppling mellan dessa komponenter.

Svar #1

Det beror på, om du ringer från syskon till syskon bör du abstrahera metoden till en tjänst som båda kommer att använda:

Service

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

komponent

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