Question

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

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

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

我们有这个数字：

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

现在我需要一种方法来隐藏，或者最好在Angular完全加载后从DOM中删除加载。通过完全加载，我在谈论Angular本身何时替换根组件的加载内容。

我找不到办法做到这一点。我该怎么办？

Answer 1

我认为你应该看到Angular Lifecycle hooks看看哪个钩子最能处理你的情况（可能是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（你甚至可以从一个组件中正常地执行它）。我建议你在Component中移动它，除非你不能（只是把它作为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);
      }

有没有办法确保加载Angular 2应用程序？

3 个答案: