Question

我正在尝试从组件访问变量到类外部，并且与该组件没有任何关系（父/子）。我做了一些研发工作，但找不到方法。如果有人有想法请帮助我。

例如，组件类似于： BankAccountComponent.ts

@Component({
  selector: 'app-bank-account',
  templateUrl: './app-bank.component.html',
  styleUrls: ['./app-bank.component.scss']
export class BankAccountComponent {
  accountFlag: false;
  changeFlag(){
    this.accountFlag = true;
  }
}

外部类，如： CustomValidator.ts

export class CustomValidators extends Validators { 
static bankAccValidator(control: AbstractControl): { [key: string]: boolean } | null {
//Here I need to use that component variable i.e accountFlag
return null;
}

Answer 1

服务是为相同的目的而设计的（依赖注入）

@Injectable()
export class SomeService {
//define a variable
someVariable = "xyz";
}

在组件（app.module.ts）的父模块或根模块中提供此服务

将服务注入组件

one.component.ts
constructor(private someService: SomeService) {

}
// update the variable here
this.someService.someVariable = "Value Changed"

two.component.ts
constructor(private someService: SomeService) {}
// updated variable can be accessed here
console.log(this.someService.someVariable);

Answer 2

不确定实现此目的的正确方法是什么，但是您可以通过全局声明并从那里导出来访问变量，如下所示-

export const accountFlag: false;

@Component({
  selector: 'app-bank-account',
  templateUrl: './app-bank.component.html',
  styleUrls: ['./app-bank.component.scss']
export class BankAccountComponent {
   constructor(){
       console.log(accountFlag);
   }
}


export class CustomValidators extends Validators { 
static bankAccValidator(control: AbstractControl): { [key: string]: boolean } | null {
console.log(accountFlag);
return null;
}

Answer 3

您可以尝试不同的方式： 1.创建服务，并在服务中定义变量并在任何组件中使用。 2.在会话存储中保持价值：

          sessionStorage.getItem('VariableName');
          sessionStorage.setItem('VariableName', "test");

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

3 个答案: