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