Angular:9如何从另一个同级组件中更改变量？

在Angular 9中，要从另一个同级组件中更改变量，可以通过以下步骤实现：

创建一个共享服务（Shared Service）：在Angular中，可以使用共享服务来在组件之间共享数据和方法。首先，创建一个共享服务，可以使用Angular的命令行工具（CLI）来生成一个新的服务文件。在命令行中运行以下命令：

ng generate service shared

这将在src/app目录下创建一个名为shared的文件夹，并在其中生成一个shared.service.ts文件。

在共享服务中定义要共享的变量：在shared.service.ts文件中，定义一个变量，并提供一个公共的setter方法和getter方法来更改和获取该变量的值。例如：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private sharedVariable: string;

  constructor() { }

  setSharedVariable(value: string) {
    this.sharedVariable = value;
  }

  getSharedVariable() {
    return this.sharedVariable;
  }
}

在要更改变量的组件中注入共享服务：在要更改变量的组件中，通过构造函数注入共享服务。例如，假设要更改变量的组件名为ComponentA：

import { Component } from '@angular/core';
import { SharedService } from '../shared/shared.service';

@Component({
  selector: 'app-component-a',
  template: `
    <button (click)="changeVariable()">Change Variable</button>
  `
})
export class ComponentA {
  constructor(private sharedService: SharedService) { }

  changeVariable() {
    this.sharedService.setSharedVariable('New Value');
  }
}

在另一个组件中获取共享的变量：在另一个组件中，也通过构造函数注入共享服务，并使用getter方法获取共享的变量的值。例如，假设要获取共享变量的组件名为ComponentB：

import { Component } from '@angular/core';
import { SharedService } from '../shared/shared.service';

@Component({
  selector: 'app-component-b',
  template: `
    <p>{{ sharedVariable }}</p>
  `
})
export class ComponentB {
  sharedVariable: string;

  constructor(private sharedService: SharedService) {
    this.sharedVariable = this.sharedService.getSharedVariable();
  }
}

通过以上步骤，你可以在ComponentA中更改共享变量的值，并在ComponentB中获取到更新后的值。这样，你就实现了从另一个同级组件中更改变量的功能。

关于Angular的更多信息和详细介绍，你可以参考腾讯云的Angular产品文档： Angular产品介绍