web-dev-qa-db-ja.com

Angularでゲッターセッターを作成する方法

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に値を取得することを期待しています

それがどのように機能するか、または他のそれは機能しますか？

angulartypescriptgetter-setter
2
Long Hoàng Nguyễn

1）login.component.tsファイルもサービスを注入することを確認します。

constructor(public user:LoginService)

2）モジュールまたはコンポーネントに、サービスを含むproviders配列がないことを確認します。

providedIn: 'root'を使用してサービスを登録し、しないでくださいprovidersにもう一度サービスを登録します配列の場合、サービスはシングルトンであり、期待どおりに機能する必要があります。

また、ゲッターとセッターの名前が正しくありません。 getterとsetterは、プロパティを定義するもう1つの方法であるため、sameの名前を持つ必要があります。

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

次に、他の宣言されたプロパティと同じように、これらのゲッター/セッタープロパティにアクセスします。

 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;
  }
9
DeborahK

同じ機能が2つあれば十分です。1つは接頭辞セット、もう1つは接頭辞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
0
Me Sa