web-dev-qa-db-fra.com

Comment créer un poseur Getter dans Angular

J'utilise Angular 7. Je veux obtenir et définir une variable dans TypeScript

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

Et mon code dans Login.Component.ts

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

Et mon code dans 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();
  }
}

Je m'attends à définir une valeur dans Login.Component.ts et à obtenir une valeur dans Customer.Component.ts

Comment ça marche ou l'autre ça marche?

angulartypescriptgetter-setter
2
Long Hoàng Nguyễn

1) Assurez-vous que votre fichier login.component.ts injecte également le service.

constructor(public user:LoginService)

2) Assurez-vous qu'aucun module ou composant ne dispose d'un tableau providers contenant votre service.

Si vous enregistrez le service à l'aide du providedIn: 'root' comme vous l'avez fait, et n'enregistrez pas le service à nouveau dans un tableau providers, alors le service doit être un singleton et travaillez comme vous le souhaitez.

En outre, le nom de vos getters et setters est incorrect. Le getter et le setter doivent avoir le même nom , car ils ne sont qu'une autre façon de définir une propriété:

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

Vous accédez ensuite à ces propriétés getter/setter comme toutes les autres propriétés déclarées.

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

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

Dans votre composant client:

  constructor(public loginService:LoginService) {

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

REMARQUE: j'ai renommé votre paramètre constructeur pour mieux l'identifier.

Dans votre composant de connexion:

  constructor(public loginService:LoginService) {

  }

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

vous n'avez besoin que de 2 mêmes fonctions, une avec le préfixe défini et une autre avec le préfixe 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