У меня есть компонент внутри другого компонента, добавленный тегом. В какой-то момент я хотел бы повторно инициализировать этот подкомпонент, как первый, который он вызывал. Есть ли способ сделать это?
Как повторно инициализировать подкомпонент в 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/