typescript 如何在 Angular 中创建 Getter Setter
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54682011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Create Getter Setter In Angular
提问by Long Hoàng Nguy?n
I'm using Angular 7. I want to get and set variable in typescript
我正在使用 Angular 7。我想在打字稿中获取和设置变量
My Code login.service.ts
我的代码 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;
}
}
And My Code In Login.Component.ts
和我在 Login.Component.ts 中的代码
fLogin(user, pass) {
this.users.setUser=user;
}
And My Code In Customer.Component.ts
还有我在 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();
}
}
I expect Set Value In Login.Component.tsAnd Get Value in Customer.Component.ts
How to it working or the other it working?
我希望在Login.Component.ts 中设置值并在Customer.Component.ts 中获取值
它如何工作或其他工作？
回答by DeborahK
1) Ensure your login.component.ts file also injects the service.
1) 确保您的 login.component.ts 文件也注入了该服务。
constructor(public user:LoginService)
2) Ensure that no module or component has a providersarray containing your service.
2) 确保没有模块或组件具有providers包含您的服务的数组。
If you register the service using the providedIn: 'root'as you have, and don'tregister the service again in any providersarray, then the service should be a singleton and work as you expect.
如果您按providedIn: 'root'原样使用 注册服务，并且不在任何providers数组中再次注册该服务，则该服务应该是单例并按您的预期工作。
Also, the naming of your getters and setters is incorrect. The getter and setter should have the samename, as they are just another way to define a property:
此外，您的 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;
}
You then access those getter/setter properties just like any other declared properties.
然后，您可以像访问任何其他声明的属性一样访问这些 getter/setter 属性。
this.fullName = "Joe Smith"; // to set the value and call the setter
console.log(this.fullName); // to reference the value.
In your customer component:
在您的客户组件中：
constructor(public loginService:LoginService) {
}
loadData() {
console.log(this.loginService.user)
}
NOTE: I renamed your constructor parameter to better identify it.
注意：我重命名了您的构造函数参数以更好地识别它。
In your login component:
在您的登录组件中：
constructor(public loginService:LoginService) {
}
fLogin(user, pass) {
this.loginService.user = user;
}
回答by Me Sa
you need only have 2 same functions, one with prefix set and another else with prefix get:
你只需要 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
