时间戳

首页 > 解决方案 > 如何在 Angular 6 中刷新/重新加载父组件 onclick 子组件提交按钮？

html - 如何在 Angular 6 中刷新/重新加载父组件 onclick 子组件提交按钮？

问题描述

我的父组件 ts 文件包含以下代码：

 openNewModal(): void {
    this.$modal.show(CategoryAddModalComponent)
        .subscribe(r => {
   });
   location.reload();
  }

我的子组件html：

    <form action="">
    <label>Enter Category</label>
        <input name="cate" type="text">
        <input name="category" type="text">
        <button class="common-btn btn-cancel" (click)="modal.hide();l>Cancel</button>
    <button class="common-btn btn" type="submit" (click)="fun_addcategory()">Submit</button>
   </form>

所以使用这个 openNewModal() 函数我调用我的子组件模型。现在在提交我的子组件时，我需要重新加载我的父组件文件。如果我尝试在此函数中调用 location.reload，我的子组件将被重新加载。但我需要重新加载父组件。有人可以指导我如何做到这一点吗？

标签： htmlangularangular6

解决方案

无需重新加载页面

使用 ChangeDetectorRef 在父级内部手动检测更改

示例： parent.ts

import {ChangeDetectorRef} from '@angular.core';

constructor(private cdr:ChangeDetectorRef){}

ngOnInit(){
this.service.susbscribe((data)=>{
 this.data=data;
//detect the change manually using 
this.cdr.detectChanges();
//Checks this view and its children. 
local change detection checks

})}

推荐阅读