javascript - Polymer 2 定义全局变量

Question

我最近开始使用 Polymer 2.0，到目前为止我已经爱上了它。我习惯了 Angular 与 typescript 的结合，我喜欢定义全局变量是多么容易。

想要的结果:假设我在登录页面中有一个名为:“用户名”的变量。var Username 当前是“Guest”，所以在我的欢迎页面中我有消息“Hello Guest!”。登录页面中的用户名从 guest => not-a-guest 更改欢迎页面现在显示:Hello not-a-guest!”。

有没有办法不用像这样传递变量？因为每次我想使用用户名属性时，我现在都必须像上面那样传递用户名。 (因此，如果我需要子组件的子组件的子组件中的用户名，我现在还必须将用户名传递给所有父组件)。现在当然这是关于用户的，所以在这种情况下，localstorage/sessionstorage 就可以了，但这只是一个例子。我想为其他东西使用全局定义，将其保存在本地存储中并不理想。

我找到了很多 Polymer 1 解决方案，但我希望我的应用程序包含完整的 Polymer 2.0。

非常感谢!

Answer 1

我想出了一个webcomponent myself .用法:

// Login component
// Define global variable
<brum-global-var key="username" value="{{username}}"></global-variable>

// welcome-page 
// Use global variable
<brum-global-var key="username" value="{{username}}" readonly></global-variable>