有沒有辦法確保加載 Angular 2 應用程序？

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 將其刪除（您甚至可以從組件中正常執行此操作）。 我建議你將它移動到組件內部，除非你不能（只是為了將它作為一個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);
      }