Angular 2-从组件到类的外部访问变量(无父关系，子关系)

Angular 2是一种流行的前端开发框架，它使用TypeScript编写，并且具有组件化的架构。在Angular 2中，组件是构建用户界面的基本单元，它们可以包含变量和方法。

要在组件之间进行变量的外部访问，可以使用Angular的依赖注入机制。依赖注入允许在组件之间共享数据和功能。以下是一种从一个组件向另一个组件传递变量的方法：

创建一个服务（Service）：服务是一个可注入的类，用于在组件之间共享数据和功能。可以使用Angular的@Injectable装饰器将一个类标记为服务，并在构造函数中注入其他服务或依赖项。
在提供商（Provider）中注册服务：在Angular的模块中，使用providers数组将服务注册为提供商。这样，服务就可以在整个应用程序中的任何组件中使用。
在组件中注入服务：在要访问变量的组件中，使用构造函数注入服务。这样，组件就可以使用服务中的变量和方法。
在组件中使用服务中的变量：一旦服务被注入到组件中，就可以通过调用服务的方法来访问服务中的变量。组件可以使用这些变量来获取或设置数据。

下面是一个示例代码，演示了如何在Angular 2中从一个组件向另一个组件传递变量：

// 定义一个服务
@Injectable()
export class DataService {
  private data: string;

  setData(data: string) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

// 在提供商中注册服务
@NgModule({
  providers: [DataService]
})
export class AppModule { }

// 组件A，设置数据
@Component({
  selector: 'component-a',
  template: `
    <button (click)="setData()">Set Data</button>
  `
})
export class ComponentA {
  constructor(private dataService: DataService) {}

  setData() {
    this.dataService.setData('Hello from Component A');
  }
}

// 组件B，获取数据
@Component({
  selector: 'component-b',
  template: `
    <div>{{ getData() }}</div>
  `
})
export class ComponentB {
  constructor(private dataService: DataService) {}

  getData() {
    return this.dataService.getData();
  }
}

在上面的示例中，DataService是一个服务，用于在组件A和组件B之间共享数据。组件A通过调用setData方法设置数据，而组件B通过调用getData方法获取数据。

这是一个简单的示例，展示了如何在Angular 2中从一个组件向另一个组件传递变量。根据实际需求，可以根据需要扩展和修改代码。

对于Angular 2的更多信息和学习资源，可以参考腾讯云的Angular产品介绍页面：Angular产品介绍