Question

我需要读取我们在项目工作区中本地存储的JSON文件，因为我需要读取component.ts文件。

有基本步骤吗？

Answer 1

您可以使用HTTP请求读取JSON数据

getJsonData(){
    let jsonUrl = 'Your json file path';
    return this.http.get(jsonUrl)
      .map( (response: Response) => {
        const data = response.json();
        return data; } );
}

Answer 2

很简单。您可以直接在组件中或使用服务。最好创建一个服务来分离应用程序的逻辑。（如果将来您想要更改访问数据的方式，您只需要更改服务）

您的服务

@Injectable()
export class DataService {
    constructor(private http: HttpClient) { } //<-- inject HttpClient
    getData() {
        return this.http.get('../assets/data.json')
    }).catch(
        (error: Response) => {
        return Observable.throw(error);
    });
}

您的组件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private dataService:DataService){} //<--inject the service

  data:any //<--a variable
  ngOnInit(){
    this.dataService.getData().subscribe((data)=>
    {  
         this.data=data
    }
}

请记住，在您的app.module中声明服务

@NgModule({
   ...
   providers: [DataService,..]
}

当然，您可以在组件中执行所有操作，但它已被拒登

如何在Angular 4脚本中读取JSON文件

2 个答案: