我有一个观察的 - loading$
- 输出真正当我想显示在UI加载覆盖,并假当它的时间,以去除覆盖。可见性由一个CSS类控制。角2:根外变化的DOM元素AppComponent
当可观察发射真正,我想的CSS类添加到<body>
,并删除它假。
HTML
<body class="">
<my-app>Angular app goes here</my-app>
</body>
正如你所看到的,<body>
是我Angular 2
应用程序之外,所以我不能使用属性绑定更改类。这是我目前做的:
AppComponent.ts
loading$.subscribe(loading =>{
if(loading) document.querySelector('body').classList.add('loading');
else document.querySelector('body').classList.remove('loading');
});
这种运作良好。当loading$
观测值发射时,loading
类被添加/删除true/false。问题是我想在web worker中运行我的应用程序,这意味着无法访问DOM。另外,Angular建议不要直接操纵DOM。
如何使用Angular
API更改<body>
?
Angular 2
,typescript 2
,rxjs 5 beta 12
PS:This question看起来很有希望,但关键的环节是死的。我也看到了几个与Beta发行工作的建议,但现在已经过时(example)
角允许您更改[页面标题](https://angular.io/docs/ts/latest/cookbook/set-document -title.html),当我们谈论有关Angular的外部元素的访问时。为什么从外部操纵DOM对你来说很重要?为什么不把它放在'my-app'中? – ktretyak
@ktretyak当'body'有'loading'类时,显示一个加载覆盖图。 'index.html'默认将类设置为ON。我希望网页显示这个加载覆盖图,直到它准备好用户输入为止(直到加载了Angular根组件)。所以一旦组件加载,我使用'Angular'去除CSS类。同样,当用户离开组件时,我在'CanDeactivate'钩子上启用'loading',并在加载下一个路由时(在OnInit钩子中)禁用它。 – BeetleJuice
您可以使根组件非常轻量级(如' router-outlet>'),并且在加载时不必等待。 –
ktretyak