How to reinitialize a subcomponent in angular2?

Question

I have a component inside another component added by a tag. At some point, I would like to reinitialize this subcomponent as the first one it called. Is there any way to do this?

Answer 1

Add a public method to the child component of say init (). Then add id to your child component in your parent html component.

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

Then you can get a child component, for example:

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

From this, you can call the init() method, which has all the component initialization logic.

Answer 2

I ran into this problem while running a test page that would display components for visual inspection.

I tried the ngIf approach mentioned in another answer, but it did not work without using setTimeout , which is more like a hack.

It turns out that ngFor perfect for this. You just use an array with a single empty object. Each time you modify the array, ngFor will re-create the internal component.

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

Then in your template

 <my-child-component *ngFor="let r of reset"></my-child-component> <button (click)="onRecreate()">Reset</button> 

Answer 3

You can reinitialize the component using * ngIf.

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

You can reinitialize by making the flag false and true

Answer 4

You can write your own cleanup method. But a faster way (but not very convenient) is to use *ngIf . When false , the component is completely removed (destroyed) from the page. When it returns to true , it goes through the normal path constructor > ngOnInit , etc. Why is it not convenient?

• he may look ugly
• You may be required to manually initiate change detection.

.

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

Answer 5

Usually you just need to move the initialization logic of the child component from it / ngOnInit constructor into the ngOnChanges hook. But if you really need to reinitialize the component for some reason (usually if the presented object has been modified), just use * ngFor, which iterates through the array with only this specific reason as an element:

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

You can use the TrackBy function if you want the component to be reinitialized only if the specific property of the represented object has changed.

Answer 6

usually in this case it is recommended to create a Behovire theme and pass it to the component as @input ()

then you can trigger any action by calling behoviresubjects.next('hi')

eg:

in your parent component

 import { BehaviorSubject } from 'rxjs'; brodCastChnage: BehaviorSubject<any> = new BehaviorSubject(null); 

and when you need to notify the child component of something:

 this.brodCastChnage.next('something'); 

in the parent HTML as well

 <my-child [onChange]="brodCastChnage"></my-child> 

in child component

  @Input() onChange; ngOnInit() { this.onChange.subscribe(res=>{ console.log('i received',res) }); } 

• do not forget to unsubscribe about the destruction

Answer 7

Here is a good example of how to call a child component from the parent component:

I call the child component function on my parent component as follows:

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

Here you can see how to call the function of the child component from the parent component ts File:

 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 } 

Additional information: http://learnangular2.com/viewChild/