【问题标题】：How To Create Getter Setter In Angular如何在 Angular 中创建 Getter Setter
【发布时间】：2019-02-14 01:38:48
【问题描述】：

我正在使用 Angular 7。我想在 typescript 中获取和设置变量

我的代码 login.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  public username:string;
  public token:string;
  public fullname:string;
  constructor() { }
  set setUser(val: string){
    this.username = val;
  }
  set setToken(val:string){
    this.token=val;
  }
  set setFullName(val:string){
    this.fullname=val;
  }
  get getUser():string{
    return this.username;
  }
  get getToken():string{
    return this.token;
  }
  get getFullName():string{
    return this.fullname;
  }
}

我在 Login.Component.ts 中的代码

fLogin(user, pass) {
    this.users.setUser=user;
}

还有我在 Customer.Component.ts 中的代码

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Http, Headers } from "@angular/http";
import {LoginService} from "../login.service"
import { NgLocalization } from '@angular/common';
@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
  constructor(public user:LoginService) {

  }
  loadData() {
    console.log(this.user.getUser)
  }
    ngOnInit() {
    this.loadData();
  }
}

我希望在 Login.Component.ts 中设置值并在 Customer.Component.ts
中获取值
它如何工作或其他工作？

【问题讨论】：

标签： angular typescript getter-setter

【解决方案1】：

1) 确保您的 login.component.ts 文件也注入服务。

constructor(public user:LoginService)

2) 确保没有任何模块或组件具有包含您的服务的 providers 数组。

如果您像以前一样使用providedIn: 'root' 注册服务，并且不要在任何providers 数组中再次注册该服务，那么该服务应该是一个单例并像您一样工作期待。

另外，您的 getter 和 setter 的命名不正确。 getter 和 setter 应该具有 相同的 名称，因为它们只是定义属性的另一种方式：

  get user():string{
    return this.username;
  }
  set user(val: string){
    this.username = val;
  }
  get token():string{
    return this.token;
  }
  set token(val:string){
    this.token=val;
  }
  get fullName():string{
    return this.fullname;
  }
  set fullName(val:string){
    this.fullname=val;
  }

然后，您可以像访问任何其他声明的属性一样访问这些 getter/setter 属性。

 this.fullName = "Joe Smith"; // to set the value and call the setter

 console.log(this.fullName); // to reference the value.

在您的客户组件中：

  constructor(public loginService:LoginService) {

  }
  loadData() {
    console.log(this.loginService.user)
  }

注意：我重命名了您的构造函数参数以更好地识别它。

在您的登录组件中：

  constructor(public loginService:LoginService) {

  }

  fLogin(user, pass) {
     this.loginService.user = user;
  }

【讨论】：

哪个部分返回未定义？考虑为您的原始问题添加更新，以显示您更新的代码和当前问题。
感谢您在 Plural vision 的角度基础课程。

【解决方案2】：

你只需要两个相同的函数，一个带有前缀集，另一个带有前缀 get：

****in the Service User

private name: string;

public get info() {
  return name;
}

public set info(val) {
  this.name = val;
}


************ usage in other components or services
this.User.info = 'your name'; // for set

const yourName = this.User.info; // for get

【讨论】：