Angular 2/4 -在组件的所有html文件中从服务中获取变量的最佳实践？

在Angular 2/4中，从服务中获取变量的最佳实践是通过依赖注入来实现。以下是一种常见的做法：

创建一个服务（Service）来处理数据逻辑和变量的获取。可以使用Angular的@Injectable装饰器来标记该服务。

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

@Injectable()
export class DataService {
  private data: any;

  constructor() {}

  getData(): any {
    // 从服务器或其他数据源获取数据的逻辑
    return this.data;
  }

  setData(data: any): void {
    // 设置数据的逻辑
    this.data = data;
  }
}

在组件（Component）中注入该服务，并在需要获取变量的地方调用服务的方法。

import { Component } from '@angular/core';
import { DataService } from 'path/to/data.service';

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ myData }}</div>
  `
})
export class MyComponent {
  myData: any;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.myData = this.dataService.getData();
  }
}

在上述示例中，DataService是一个服务，它包含了一个私有变量data和用于获取和设置data的方法。MyComponent是一个组件，它通过依赖注入方式将DataService注入，并在ngOnInit生命周期钩子中调用getData方法来获取数据，并将其赋值给myData变量，然后在模板中显示。

这种做法的优势是将数据逻辑和组件解耦，使得组件更加专注于UI的呈现。同时，通过依赖注入的方式，可以方便地在其他组件中共享同一个数据服务。

对于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或官方网站来获取更详细的信息。