如何重新初始化angular2中的子組件？

我有一個組件在另一個組件內，通過標籤添加。在某個時候，我想重新初始化這個子組件，就像它調用的第一個組件一樣。有沒有辦法做到這一點？如何重新初始化angular2中的子組件？

2017-08-01 jonyjm

你到底想幹什麼？沒有辦法告訴組件重新初始化自己。但是有辦法讓它爲自己重新獲取新數據。如果您可以提供更多信息，我們可以爲您提供一些選擇。 – DeborahK

的想法是打開組件爲模式，預加載，其將打開它的每個組件。當然，當模式關閉時，組件需要重新啓動以便將來調用。 – jonyjm

您可以編寫自己的cleanup方法。但更快的方式（但不方便）是使用*ngIf。當值爲false時，組件從頁面上完全刪除（銷燬）。當它回到true它通過常規路徑constructor > ngOnInit等等。爲什麼它不方便？

它可能看起來醜陋
可能需要您來觸發變化檢測手動

。

reinitChildComponent(): void{ 
    this.childVisible = false; 
    this.changeDetectorRef.detectChanges(); 
    this.childVisible = true; 
    this.changeDetectorRef.detectChanges(); 
}

來源

2017-08-01 16:22:50

正常工作對我來說，感謝 – jorghe94

在子組件中添加一個公共方法，如init（）。然後在您的父組件html中爲您的子組件添加一個id。

<my-child #myChild></my-child>

然後你就可以得到這樣的子組件：

@ViewChild('myChild') private myChild: MyChildComponent;

從您可以調用其中有分量的所有初始化邏輯init()方法。

來源

2017-08-01 16:27:10 Faisal

這是有意義的，我+1 –

的想法是不寫，我需要重新初始化組件 – jonyjm

的事情沒有直接的方法來重新初始化組件。您必須使用答案中指定的解決方法之一。 – Faisal

我在做一個測試頁面時會遇到這個問題，該測試頁面會渲染用於視覺檢查的組件。

我試過在另一個答案中提到的ngIf方法，但沒有使用setTimeout這似乎更像是一個黑客。

原來ngFor是完美的。您只需使用一個具有單個空對象的數組。每次修改陣列時，ngFor將重新創建內部組件。

public reset: any[] = [{}]; 

public onRecreate() { 
    this.reset[0] = {}; 
}

然後在你的模板

<my-child-component *ngFor="let r of reset"></my-child-component> 

<button (click)="onRecreate()">Reset</button>

來源

2017-08-01 16:27:26 cgTag

聽起來很有趣，但醜得要命...哈哈。我會嘗試這種方法 – jonyjm

醜陋，如果任何其他程序員看到了他們也不會知道是什麼原因。一定要添加大量的評論:) – cgTag

通常你應該只從它的構造函數/ ngOnInit移動兒童組件的初始化邏輯到它的ngOnChanges掛鉤。但如果你真的需要一個組件重新初始化不論何種原因（通常如果表示的對象發生了變化），只需使用一個* ngFor，它迭代僅與該具體原因爲元素的數組：

<child-component [child]="child" *ngFor="let child of [child]"></child-component>

如果您希望組件僅在所表示對象的某個屬性發生更改時才重新初始化，則可以使用trackBy函數。

來源

2017-09-17 12:03:54

您可以使用* ngIf重新初始化組件。

<mychild *ngIf="flag"></mychild>

可以重新初始化通過使標誌爲假和真

來源

2017-10-04 11:39:38

-1

這裏是一個很好的例子，如何從父組件調用子組件：

我叫子組件的功能，以我的父組件是這樣的：

<cp-file-manager [(ngModel)]="container" name="fileManager"[disableFiles]="true" [disableDocId]="id" [newFolderId]="newFolderId"></cp-file-manager>

在這裏你可以看到如何從父組件調用子組件函數NT TS 文件：

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { FileManagerComponent } from '../../../../shared/components/file-manager/file-manager.component' 

@ViewChild(FileManagerComponent) fileManager: FileManagerComponent; 

doSomething() { //this is parent component function 
      this.fileManager.openFolder(); //openFolder-is child component function 
    }

附加信息： http://learnangular2.com/viewChild/

來源

2018-01-25 09:39:54

雖然此鏈接可以回答這個問題，最好是在這裏有答案的主要部件，並提供鏈接以供參考。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [評分]（/審查/低質職位/ 18622522） – Alisson

我已經解釋了一切 –

如何重新初始化angular2中的子組件？

回答

相關問題