Как повторно инициализировать подкомпонент в angular2?

Ответ 1

Добавьте общедоступный метод в дочерний компонент say init(). Затем добавьте id к вашему дочернему компоненту в свой родительский компонент html.

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

Затем вы можете получить дочерний компонент, например:

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

Из этого вы можете вызвать метод init(), который имеет всю логику инициализации компонента.

Ответ 2

Я столкнулся с этой проблемой при выполнении тестовой страницы, которая будет отображать компоненты для визуального контроля.

Я попробовал подход 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>

Ответ 3

Вы можете повторно инициализировать компонент, используя * ngIf.

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

Вы можете повторно инициализировать, сделав флаг false и true

Ответ 4

Вы можете написать свой собственный метод cleanup. Но более быстрый способ (но не очень удобный) - использовать *ngIf. Когда значение false, компонент полностью удаляется (уничтожается) со страницы. Когда он вернется к true, он проходит через обычный путь constructor > ngOnInit и т.д. Почему это не удобно?

• он может выглядеть уродливым
• может потребоваться от вас вручную инициировать обнаружение изменений.

.

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

Ответ 5

Обычно вам нужно просто переместить логику инициализации дочернего компонента из него конструктор /ngOnInit в него ngOnChanges hook. Но если вам действительно нужно повторно инициализировать компонент по каким-либо причинам (обычно, если представленный объект был изменен), просто используйте * ngFor, который выполняет итерацию по массиву только с этой конкретной причиной как элемент:

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

Вы можете использовать функцию TrackBy, если вы хотите, чтобы компонент повторно инициализировался, только если изменилось определенное свойство представленного объекта.

Ответ 6

обычно в этом случае рекомендуется создать тему Behovire и передать ее компоненту как @input()

тогда вы можете запустить любое действие, вызвав behoviresubjects.next('hi')

например:

в вашем родительском компоненте

import { BehaviorSubject } from 'rxjs';

brodCastChnage: BehaviorSubject<any> = new BehaviorSubject(null);

и когда вам нужно уведомить дочерний компонент о чем-то:

this.brodCastChnage.next('something');

в HTML родительского, а также

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

в дочернем компоненте

      @Input() onChange;

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

• не забудьте отписаться об уничтожении

Ответ 7

Вот хороший пример, как вызвать дочерний компонент из родительского компонента:

Я вызываю дочернюю компонентную функцию в свой родительский компонент следующим образом:

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

Здесь вы можете увидеть, как вызвать функцию дочернего компонента из родительского компонента 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/