Question

我是Angular框架的新手，我将创建一个简单的服务。它将从远程api获取数据 - 照片和名称。到目前为止，我有一个工作的获取示例：

const div = document.getElementById('author');

const url = 'https://randomuser.me/api/?results=1';

var f = fetch(url);

f.then(onFulfilled).then(building);

function onFulfilled(response){
	return response.json();
};

function building(data){
	var author = data.results[0];
	var img = document.createElement("img");
	img.src = author.picture.medium;
	var p = document.createElement("div");
	p.innerHTML = author.name.first + ' ' + author.name.last;
	document.getElementById('author').append(img,p);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="author"></div>
<script src="gibbon.js"></script>
</body>
</html>

问题是如何根据Angular重构此代码。我知道fetch肯定会用于服务。但是组件内应该是什么。组件将如何获取此数据。

Answer 1

我会帮忙的。

这是服务

    import { Injectable } from '@angular/core';

    @Injectable()
    export class DataFetchService {

      constructor(private http: HttpClient) { }
      getData() {
       return this.http.get('https://randomuser.me/api/?results=1')
      }

    }

和组件

  export class yourComponent {
      author;
      constructor(private dataFetch: DataFetchService) { }
      ngOnInit() {
        this.dataFetch.getData()
          .subscribe(res => this.author = res.results[0])   
      }

    }

加上模板

<img src="{{author.picture.medium}}">
<p> {{author.name.first}} {{author.name.last}}</p>

实际上你需要导入一些员工，但是ide会帮助你，并将服务注册到app模块中。我认为这个问题只是为了一个概念的证明。希望它会有所帮助。

在Angular

1 个答案: