要向子组件发送 API,可以使用Input装饰器来将数据从父组件传递给子组件。以下是一个示例解决方法:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class ApiService {
constructor(private http: HttpClient) {}
getData(): Observable {
return this.http.get('https://api.example.com/data');
}
}
import { Component, Input, OnChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Data: {{ data }}
`,
})
export class ChildComponent implements OnChanges {
@Input() data: any;
ngOnChanges(): void {
console.log(this.data);
}
}
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-parent',
template: `
`,
providers: [ApiService],
})
export class ParentComponent implements OnInit {
apiData: any;
constructor(private apiService: ApiService) {}
ngOnInit(): void {
this.apiService.getData().subscribe(data => {
this.apiData = data;
});
}
}
通过以上步骤,父组件将从API获取数据,并通过属性绑定将数据传递给子组件。子组件将接收到数据,并在视图中显示。