直接在Angular应用程序的组件HTML中获取会话变量

Question

是否有一种方法可以直接在组件HTML中获取和显示会话变量的值，而无需为本地变量分配会话变量值？

类似于：

<span>{{sessionStorage.getItem('name')}}</span>

Answer 1

正如Angular文档中提到的，模板中的表达式上下文是组件实例。由于sessionStorage是window对象的成员，因此不能在模板中直接引用它：

模板表达式不能引用全局命名空间中的任何内容，除了CCD_ 2。它们不能引用window或document。

---

您可以通过将sessionStorage分配给组件类的公共属性来使其在模板中可用：

export class MyComponent {
public sessionStorage = sessionStorage;
}

并引用模板中的属性：

<span>{{sessionStorage.getItem('name')}}</span>

有关演示，请参阅此stackblitz。