Angular CLI 服务始终将字符串变量 return 存储为默认值

Angular CLI Services stored String variable always return to default value

我是 angular CLI 的新手。当我试图将一个字符串值传递给服务然后试图在另一个组件中检索它时发生了这种情况

select.ts

public gotofriends(fname:string, fpic:string){    
    const service = new FbdetailsService();
    service.selectedfrienddetails(fname, fpic);
    this.router.navigate(['calculate']);
}

select.html

<button (click)="gotofriends(user.name,user.picture.data.url)" class="btn btn-lg btn-primary mx-1">Select &nbsp;</button>

fbdetails 服务

export class FbdetailsService {
    fbname;
    fbpic;
    public selectedfrienddetails(name: string, profilephoto: string) {
        this.fbname = name;
        this.fbpic = profilephoto;
        console.log("selected friend details", this.fbname, this.fbpic)
    }


    public returnfrienddetails() {
        console.log(this.fbname, this.fbpic)
    }
}

计算componet.ts

public printname(){
    const service = new FbdetailsService();
    service.returnfrienddetails()
}

计算HTML

<button (click)="printname()" class="btn btn-lg btn-primary mx-1">Calculate</button>

当我在 selectcomponet.ts 中调用 selectedfrienddetails() 时,它会成功打印string to console 但是当我试图在 calculatecomponent.ts 中调用 returnfrienddetails() 时它没有打印任何值。

然后我尝试将两个按钮添加到 selectcomponent.ts
第一个通过 selectedfrienddetails() 并成功打印变量然后第二个调用 returnfrienddetails() 但与第一种情况一样 returnfrienddetails() 没有打印任何东西。

在Angular中,服务是单例的。这意味着它们只有一个实例。

你,正在创造第二个:

const service = new FbdetailsService();

你不应该。相反,您应该将您的服务注入到您的组件中。为此,将您的服务装饰为可注入的,并将其注入到您的组件构造函数中。