Javascript angular 8如何获取和设置值以及从任何页面访问值？

您好，我正在使用angular 8，我想知道如何访问任何页面中的设置值

我的代码

班级

export class testClass {

        get test():string{
            return this.sexe;
        }
        set test(val:string){
            this.sexe = val;
        }

    }

在clild.ts中

import { testClass } from '../class';
export class Child{
constructor (private test:testClass){}

test (){
this.test.test = "hello";
}

在parent.js中

import { testClass } from '../class';
export class Parent{
    constructor (private test:testClass){}

    test (){
    console.log(test.test);
    }
}

在app.module.ts中

import { testClass } from '../class';
 providers: [testClass],

---

为了在parent.js中获得“testundefined”，我在做什么？你必须使用一个服务

服务在应用程序启动时初始化，并一直保持初始化状态，直到应用程序停止。通过服务传递值，您可以在调用该服务的任何位置访问该值

因此，如果你有以下几点：

@Injectable()
export class ExampleService {
    public varIWant: string = 'I wan't to use this anywhere.'
}

您可以通过执行以下操作在组件中访问它：

import { ExampleService } from '../my/path/to/service'
export class Parent {
    constructor(private exampleService: ExampleService) { }

    public setVarAsLocal: string = this.exampleService.varIWant;

    public changeServiceVariable() {
        this.setVarAsLocal = 'New Value For String';
        this.exampleService.varIWant = this.setVarAsLocal;
    }
}

---

就这样。只要实例正在运行，该值就会保持不变

不确定在任何页面中设置和获取值是什么意思？我想你是说组件

如果是这样，我会使用这样的服务

@Injectable({
  providedIn: 'root'
})
export class ExampleService{

  private _value: any;
  private _valueObs$ = new BehaviorSubject(null);

  set setValue(newValue: any): void{
    this._value = newValue;
  }

  get getNewValue(): any{
    return this._value;
  }

  set setObservableValue(newValue: any): void{
    this._valueObs$.next(newValue)
  }

  get getNewObservableValue(): any{
    return this._valueObs$;
  }
}

在上面的方法中有两种方法，第一种是相当标准的set和get，第二种是利用被称为主题的东西，我将在下一节中讨论它们的区别

然后在任何组件中使用此服务

@Component({
  selector: 'example',
})
export class ExampleComponent implements OnInit {

  newValue: any;

  constructor(private readonly exampleService: ExampleService
  ) { }

  ngOnInit(): void {
    this.getObservableExampleValue();
  }

  getExampleServiceValue(): any {
    this.exampleService.getNewValue;
  }

  setExampleServiceNewValue(value: any): void {
    this.exampleService.setNewValue = value;
  }

  getObservableExampleValue() {
    this.exampleService.getNewObservableValue.subscribe((newObsValue) => {
      this.newValue = newObsValue
    })
  }

  setObservableExampleValue(value: any): void{
    this.exampleService.setObservableValue(value);
  }

  ngOnDestroy(){
    this.exampleService.getNewObservableValue.unsubscribe();
  }

}

因此，我不会详细介绍标准的setValue和getNewValue，您可以根据自己的喜好调用它们

现在，如果您想让多个组件同时意识到某个特定值，那么第二种方法很好，假设我们使用

setobservevalue

方法设置

\u valueObs$

，并且我们在5个不同的组件中使用了此服务，所有5个组件都会收到该值，非常方便，对吗

现在您会注意到，我们实际调用

getNewObservableValue

非常重要，这样我们就可以打开

流

，通常您会在

ngOnInit

上执行此操作，这样组件模板/代码就可以访问该值，假设您希望立即使用该值，否则，您可以在以后调用它，订阅/observable工作的方式有点像点击

想象一下，你有一个水龙头，然后打开它，这被称为

订阅

this.exampleService.getNewObservableValue.subscribe((newObsValue) => {
          this.newValue = newObsValue
        })

水龙头打开后，现在会发出

水流

，或者在本例中再次发出数据流，因此每次设置新值时，新数据段将通过该

流

，并自动更新组件中的

this.newValue

但关掉水龙头也很重要！我们不想浪费水，当我们使用完它，这是当我们取消订阅时，组件不再被使用，所以

ngOnDestroy(){
    this.exampleService.getNewObservableValue.unsubscribe();
  }

这是为了防止所谓的内存泄漏，这超出了本答案的范围，要了解更多关于Rxjs的信息，我会阅读一些文档，或者观看一些youtube视频，有很多教程

---

希望我已经解释得足够全面，如果不想随意评论的话。

为什么要使用js文件？有一些方法可以在组件之间传递数据，也许您可以使用service.console.log（THIS.test.test）？我想你可以自己找到它。。。您的父组件和子组件中存在问题，您有两个属性，它们的名称“test”与function相同，“test”与injection相同？你是指任何组件吗？这是否回答了你的问题？