Question

我在另一个组件中有一个组件，由标签添加。在某些时候，我想重新初始化这个子组件，就像它调用它的第一个。有没有办法做到这一点？

Answer 1

在子组件中添加一个公共方法，例如init（）。然后在父组件html中为您的子组件添加一个id。

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

然后您可以获得子组件，如：

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

从那里你可以调用具有组件的所有初始化逻辑的init()方法。

Answer 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>

Answer 3

您可以编写自己的cleanup方法。但更快的方式（但不是非常方便）是使用*ngIf。当值为false时，组件将从页面中完全删除（销毁）。当它返回true时，它会通过常规路径constructor > ngOnInit等等。为什么不方便？

看起来很难看
您可能需要手动触发更改检测

。

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

Answer 4

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

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

您可以通过将标志设为false和true来重新初始化

Answer 5

通常你应该将子组件的初始化逻辑从它的构造函数/ ngOnInit移动到它的ngOnChanges钩子中。但是如果你真的需要重新初始化一个组件由于任何原因（通常如果所表示的对象已经改变），只需使用* ngFor，它只使用特定原因作为元素迭代一个数组：

git merge-base --is-ancestor C B

如果希望组件仅在所表示对象的某个属性发生更改时重新初始化，则可以使用trackBy函数。

Answer 6

在这种情况下，通常的最佳做法是创建 Behovire Subject 并将其作为 @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)
       });
     }

不要忘记取消订阅，请取消订阅

Answer 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/

如何在angular2中重新初始化子组件？

7 个答案: