更新角度服务中的变量

Question

我是angular的新手，正在尝试更新变量，但我的变量在视图中没有更新。我正在访问在服务中创建的变量"name"并更新它，但它不起作用。当我调用clickme()时，变量名称的值不会在网页上更新，并显示旧值"无名称"。我想将变量名称值更改为"rahul"，并将其显示在页面上。

我的服务：

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FirstService {
name:string="no name"
setName() {
this.name="rahul"
}
}

代码：

import { Component, OnInit } from '@angular/core';
import { FirstServiceService } from './first-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [FirstService]
})
export class AppComponent implements OnInit {
account:any
name:string
constructor(private userName:FirstService){      }
ngOnInit(): void {
this.name=this.userName.name
}
clickMe(e){
this.userName.setName()
}
}

Answer 1

您通常这样做：

服务

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FirstService {
private name:string="no name";
setName(_name: string): void {
this.name = _name;
}
getName(): string {
return this.name;
}
}

组件

import { Component, OnInit } from '@angular/core';
import { FirstService } from './first-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [FirstService]
})
export class AppComponent implements OnInit {
account:any
name:string
constructor(private firstService: FirstService){      }
ngOnInit(): void {
this.name=this.firstService.getName();
}
clickMe(e){
this.userName.setName("rahul");
this.name=this.firstService.getName();
}
}

然而，我必须承认，name的值通常不会由后来从服务中使用它的相同方法来设置。不过，至少当这是方法中仅有的2行代码时，情况并非如此。但我认为你仍然在玩一些服务，然后就没事了。

Answer 2

在类似服务的组件中不需要设置相同的变量名。你可以使用任何你想要的东西。

应用程序内组件

clickMe(e){
this.name=this.userName.setName();
}

在役

getName() {
return this.name;
}

我希望它能帮助

Answer 3

在OnInit中，您只将变量"name"等于this.userName.name，这是因为您没有看到任何更改-您显示的是变量"name(名称("，而不是变量this.userName.name。

通常你可以使用一些简单的，它是一个getter您可以写入组件

export class AppComponent implements OnInit {
account:any
//NOT have a variable "name", just a getter
get name(){
return this.userName.name;
}
//even if you want you can write
set name(value)
{ 
this.userName.name=value;
}
constructor(private userName:FirstService){      }
ngOnInit(): void {
}
clickMe(e){
this.userName.setName()
//or this.name="George"; //if you include the function set name()
//or this.userName.name="George"
}
}