在Angular应用程序中,当你尝试添加一个构造函数时,可能会遇到一个问题,即页面变成空白,并且无法正常工作。这可能是因为构造函数没有正确注入所需的依赖项。为了解决这个问题,你需要注入你的依赖项。
以下是一个示例代码,展示如何解决这个问题:
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'my-component',
template: '{{message}}
'
})
export class MyComponent {
public message: string = '';
constructor(http: HttpClient) {
http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
this.message = data.title;
});
}
}
在上面的代码中,我们尝试在组件中添加一个构造函数,并且使用HttpClient来获取数据。但是,我们没有注入HttpClient。为了解决这个问题,我们需要在组件中添加@Inject
装饰器,并通过构造函数将它注入进来:
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'my-component',
template: '{{message}}
'
})
export class MyComponent {
public message: string = '';
constructor(@Inject(HttpClient) http: HttpClient) {
http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
this.message = data.title;
});
}
}
使用@Inject
装饰器,我们已经成功地将HttpClient注入到了构造函数中,使得我们的应用程序可以正常工作,不再出现空白页面。