Question

我有一个使用以下装饰器声明的服务MyService：

@Injectable({
    providedIn: 'root'
})

其实现的摘录是：

private myData: string = '';

setData(data: string) {
   this.myData = data;
}

getData(): string {
    return this.myData;
}

我有一个组件MyComponent，它的URL是http://localhost:4200/sn8j8h。在首次加载时（通过使用路线导航至该负载），我设置了服务的数据：

constructor (private srv: MyService) { }

ngOnInit() {
    let s = this.srv.getData();
}

// this event triggers as I have demonstrated it by putting break points in
onSomeEvent() { 
    this.srv.SetData('my data');
}

但是在第二次加载时（当我的焦点位于URL为http://localhost:4200/sn8j8h的浏览器地址栏中时，按Enter键），在ngOnInit上，srv.getData()返回一个空字符串而不是先前的数据my data。

文档说带有provided in root的DI在整个应用程序中都可以重复使用。但是在我的示例中，它似乎没有被重用。

有什么想法吗？

Answer 1

之所以发生这种情况，是因为在重新加载应用程序后（通过按ENTER或F5），整个应用程序都被重新加载了。因此，服务或组件之前保存的所有数据都将丢失。

有两种方法可以解决此问题：

使用{strong> Debabrata Paul Chowdhury 已解释的localStorage。所以，我不会进入。如果您不打算保存任何数据客户端，那么当您开始保存数据客户端时，它将具有自己的实现和用例（数据一致性）。
我建议您以这样一种方式创建角度组件流：在加载组件之前自动设置数据。如果数据为空，则组件应正确处理它。

这取决于您实施的业务案例。

Answer 2

每当您在浏览器URL上按ENTER键时，由于重新加载了应用程序，存储在服务中的数据将丢失。要在点击浏览器URL上的Enter后获取数据，您应该将数据与服务一起存储在localstorage和cookie中。

private myData: string = '';

    setData(data: string) {
      this.myData = data;
      localStorage.setItem("dataKey",data);    
    }

    getData(): string {
       return this.myData? this.myData :localStorage.getItem("dataKey");
    }

要从本地存储中删除项目，可以使用

localStorage.removeItem("dataKey");

角度DI单件

2 个答案: