如何在Angular 8中重新加载或刷新独子组件

我有两个组件，一个是父组件，另一个是子组件

HTML部分

<div>
  <div class="row col-md-12">
    <div class="col-md-4">
       <!-- Some HTML Code of Parent component over here -->
    </div>
    <div class="col-md-8">
      <child-component></child-component>
    </div>
 </div>
 <button class="button" (click)="reloadOnlyChild($event)">Reload Child</button>
</div>

---

我在互联网上搜索，我得到的是Vue或React，但不是Angular。

如果您在

Child.Component.ts

中有一个表单，并且如果您想从

parent Component

重置它，您可以使用

Subject

在父级和子级之间建立连接

Parent.Component.html

<child-component [resetFormSubject]="resetFormSubject.asObservable()"></child-component>
<button (click)="resetChildForm()"></button>

Parent.Component.ts

import { Subject } from "rxjs";
resetFormSubject: Subject<boolean> = new Subject<boolean>();

resetChildForm(){
   this.resetFormSubject.next(true);
}

import { Subject } from "rxjs";
@Input() resetFormSubject: Subject<boolean> = new Subject<boolean>();

ngOnInit(){
 this.resetFormSubject.subscribe(response => {
    if(response){
     yourForm.reset();
    // Or do whatever operations you need.
  }
 }
}

<child-component [someInput]="inputValue"></child-component>

从“rxjs”导入{Subject}；
resetFormSubject:Subject=新主题（）；
resetChildForm（）{
this.resetFormSubject.next（true）；
}

子组件.ts

import { Subject } from "rxjs";
resetFormSubject: Subject<boolean> = new Subject<boolean>();

resetChildForm(){
   this.resetFormSubject.next(true);
}

import { Subject } from "rxjs";
@Input() resetFormSubject: Subject<boolean> = new Subject<boolean>();

ngOnInit(){
 this.resetFormSubject.subscribe(response => {
    if(response){
     yourForm.reset();
    // Or do whatever operations you need.
  }
 }
}

<child-component [someInput]="inputValue"></child-component>

从“rxjs”导入{Subject}；
@Input（）resetFormSubject:Subject=新主题（）；
恩戈尼尼特（）{
this.resetFormSubject.subscribe（响应=>{
如果（答复）{
yourForm.reset（）；
//或者做任何你需要的手术。
}
}
}

通过使用Subject，您可以在每次单击按钮时建立从父级到子级的连接

---

希望这个答案有帮助！干杯：）

您可以添加一个输入来更新组件，或者在可以在代码中调用的子级中添加一个更新函数。使用@ViewChild从父级调用子级更新函数。像这样

（）：

儿童：

import { Component } from "@angular/core";

@Component({
   selector: "app-child",
   templateUrl: "./child.component.html",
   styleUrls: ["./child.component.css"] 
})
export class ChildComponent {
   ticks = Date.now().valueOf();

   constructor() {}

   update(): void {
   this.ticks = Date.now().valueOf();
   }
}

家长：

import { Component, OnInit, ViewChild } from "@angular/core";
import { ChildComponent } from "./../child/child.component";

@Component({
 selector: "app-parrent",
 templateUrl: "./parrent.component.html",
 styleUrls: ["./parrent.component.css"]
})
export class ParrentComponent implements OnInit {
  @ViewChild(ChildComponent, { static: false }) childC: ChildComponent;
  showChild: boolean = true;
  constructor() {}

  ngOnInit() {}

  onUpdateChild() {
    this.childC.update();
 }
}

---

我们还可以使用

*ngIf

和

setTimeout

从父组件重置子组件，而无需对子组件进行任何更改

.模板：

.ts:

---

当我们无法控制子组件（如第三方库组件）时，这尤其有用。

更新子组件的最佳方法是：ngochanges（）

ngochanges（）：“当指令的任何数据绑定属性更改时调用的生命周期挂钩。定义一个ngochanges（）方法来处理更改。”我们使用此生命周期挂钩来响应对@Input（）变量的更改

示例：

import { Component, Input, OnChanges } from "@angular/core";

@Component({
  selector: "child-component",
  templateUrl: "./child-component.html"
})
export class MyComponent implements OnChanges {
  @Input() someInput: string;

  constructor() {}

  ngOnChanges() {
  /**********THIS FUNCTION WILL TRIGGER WHEN PARENT COMPONENT UPDATES 'someInput'**************/
  //Write your code here
   console.log(this.someInput);
  }   
 
}

在父组件中使用子组件，如下所示

import { Subject } from "rxjs";
resetFormSubject: Subject<boolean> = new Subject<boolean>();

resetChildForm(){
   this.resetFormSubject.next(true);
}

import { Subject } from "rxjs";
@Input() resetFormSubject: Subject<boolean> = new Subject<boolean>();

ngOnInit(){
 this.resetFormSubject.subscribe(response => {
    if(response){
     yourForm.reset();
    // Or do whatever operations you need.
  }
 }
}

<child-component [someInput]="inputValue"></child-component>

你说的“重新加载”是什么意思？再次启动*ngOnInit？假设子组件是一个表单。我已经填好了那张表格。我点击按钮，我正在保存数据，我希望它重新加载，以便该表单的所有字段都变为空且未被触及。您是否可以发布更多代码或更好地为此创建stackblitz。谢谢，这解决了我的问题！：）