角度2：更改根AppComponent之外的DOM元素_Dom_Angular_Typescript_Rxjs5

角度2：更改根AppComponent之外的DOM元素

dom angular typescript

角度2：更改根AppComponent之外的DOM元素,dom,angular,typescript,rxjs5,Dom,Angular,Typescript,Rxjs5,我有一个可观察的--加载$，当我想在UI中显示加载覆盖时，它会输出true，当需要删除该覆盖时，它会输出false。可见性由CSS类控制当Observable发出true时，我想将CSS类添加到，并在false中删除它 html <body class=""> <my-app>Angular app goes here</my-app> </body> <body> <my-app> &l

我有一个可观察的--

加载$

，当我想在UI中显示加载覆盖时，它会输出true，当需要删除该覆盖时，它会输出false。可见性由CSS类控制

当Observable发出true时，我想将CSS类添加到

，并在false中删除它

html

<body class="">
    <my-app>Angular app goes here</my-app>
</body>

<body>
    <my-app>
        <div id="overlay" class="loading"></div>
    </my-app>
</body>

<div id="overlay" [class.loading]="showLoading"></div>
<router-outlet></router-outlet>

这很有效。当

loading$

observable发出true/false时，添加/删除

loading

类。问题是我想在web worker中运行我的应用程序，这意味着无法访问DOM。另外，Angular建议不要直接操作DOM

如何使用

Angular

API更改

Angular 2

，

typescript 2

，

rxjs 5 beta 12

附言：看起来很有希望，但关键环节已经失效。我还看到了一些建议，这些建议适用于Beta版，但现在已经过时了（）

尝试这样做：

<my-app>
  <div class="your-class-for-loading"></div>
</my-app>

当

我的应用程序准备就绪时，div将自动删除。
@ktretyak的解决方案为我提供了解决方案。基本上，我没有使用
而是在

index.html
<body class="">
    <my-app>Angular app goes here</my-app>
</body>

<body>
    <my-app>
        <div id="overlay" class="loading"></div>
    </my-app>
</body>

<div id="overlay" [class.loading]="showLoading"></div>
<router-outlet></router-outlet>

由于CSS样式，并且启用了加载
启动，因此在Javascript加载和角度
引导时会显示覆盖
一旦加载了Angular
，则
中的所有内容都将替换为AppComponent
模板。正如我在OP下面的评论中所解释的，我需要不断地访问这个加载覆盖，因为我在加载新路由时显示它（当用户从一个路由组件导航到另一个路由组件时）。所以我必须在模板中包含相同的覆盖div
app.component.html
<body class="">
    <my-app>Angular app goes here</my-app>
</body>

<body>
    <my-app>
        <div id="overlay" class="loading"></div>
    </my-app>
</body>

<div id="overlay" [class.loading]="showLoading"></div>
<router-outlet></router-outlet>

如果在引导应用程序的过程中希望DOM替换不间断动画，则使用以下方法：
将覆盖放在my app
元素之后
<my-app></my-app>
<div id="overlay"></div>

在使用初始调用加载数据时更改属性（当屏幕未完全呈现时，飞溅仍然可见）
使用CSS隐藏加载程序：
my-app.ready + .overlay {
    animation: hideOverlay 1s forwards;
}

@keyframes hideOverlay {
  0% {
        opacity: 1;
  }

  100% {
        opacity: 0;
        visibility: hidden;
  }
}

Angular允许您仅更改，当我们谈论如何访问外部元素时。为什么从外部操纵DOM对您很重要？为什么不在我的应用程序
？@ktretyak当主体
具有加载
类时，将显示加载覆盖<默认情况下，code>index.html

已启用该类。我希望网页显示此加载覆盖，直到它准备好供用户输入（直到加载

Angular

根组件）。因此，一旦加载组件，我就使用

Angular

删除CSS类。同样，当用户路由离开组件时，我在

CanDeactivate

hook上启用

loading

，并在下一个路由加载时禁用它（在

OnInit

hook中），您可以使根组件非常轻量级（如

），加载时您不必等待。@ktretyak感谢您的想法。这可能是我的备份计划，但也不是很好：即使要加载一个轻量级根组件，也需要下载我的根模块使用的所有角度依赖库（coreJS、zoneJS、ReflectMetadata、SystemJS）以及第三方库（Angular 2 Material、CryptJS），引导程序需要完成设置。我当前实现的目的是在整个过程中显示加载UI。谢谢。你启发了我一个解决方案（我写它作为一个答案）还没有测试这个，但它真的很聪明！