是否有一种方法可以确保加载Angular 2应用程序

Question

由于我们拥有的自定义SPL，我们无法在<app-root>标签中使用加载程序或根组件的名称。

所以，而不是这个常见的图：

<app-root>
    <p>loading...</p>
</app-root>

我们有这个数字：

<app-root></app-root>
.
.
.
<p>loading...</p>

现在，我需要一种隐藏或最好在Angular满载后从DOM上删除加载的方法。通过满载，我正在谈论角度何时替代根部分量的加载内容。

我找不到这样做的方法。我该怎么办？

Answer 1

我认为您应该看到角生命周期挂钩，以查看哪种挂钩处理最佳的情况(可能是AfterviewInit，AfterContentInit ...(

否则，如果您只需要设置手动加载(例如"等待直到http呼叫完成"(，那么您应该设置一个布尔属性，指示加载状态，例如：

public class AppComponent implements OnInit {
  public isLoading = true;
  ngOnInit(http: HttpClient) {
    const vm = this;
    vm.http.get('something').subscribe(response => {
      vm.isLoading = false;
      // handle success
    }, error => {
      vm.isLoading = false
        // handle error
    });
  }
}

从快速的第一个视图中没有看到您的<p>不在Angular组件内，因此您可能应该使用JavaScript将其删除以操纵DOM(即使是从组件中可以正常进行(。我建议您将其移入组件中，除非您一定(仅作为ElementRef或普通ngIf指令处理(

Answer 2

怎么样

<p ngIf="isLoading">loading...</p>

和您的代码

public class AppComponent implements OnInit{
public isLoading = true;
ngOnInit(){
 this.isLoading=false;
}
}

Answer 3

给您的<p>标签一个ID，并执行以下操作：

export class appComponent implements OnInit{
     constructor(@Inject(DOCUMENT) private document: any) { }
      ngOnInit(){
        let p = this.document.getElementById("your<p>tagid");
        //remove it now i think this is valid
        // this.document.removeChild(p);
      }