如何在Angular中创建Getter Setter [英] How To Create Getter Setter In Angular

问题描述

我正在使用Angular7.我想在打字稿中获取并设置变量

I'm using Angular 7. I want to get and set variable in typescript

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

它是如何工作的还是其他的?

How to it working or the other it working?

推荐答案

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

1) Ensure your login.component.ts file also injects the service.

constructor(public user:LoginService)

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

2) Ensure that no module or component has a providers array containing your service.

如果您使用现有的 providedIn:'root'注册服务，并且请勿在任何 providers 中再次注册服务>数组，则该服务应为单例并按预期工作.

If you register the service using the providedIn: 'root' as you have, and don't register the service again in any providers array, then the service should be a singleton and work as you expect.

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

Also, the naming of your getters and setters is incorrect. The getter and setter should have the same name, as they are just another way to define a property:

  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属性.

You then access those getter/setter properties just like any other declared properties.

 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)
  }

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

NOTE: I renamed your constructor parameter to better identify it.

在您的登录组件中:

  constructor(public loginService:LoginService) {

  }

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

这篇关于如何在Angular中创建Getter Setter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！