Question

我的父组件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，则我的子组件正在重新加载。但是我需要重新加载父组件。有人可以指导我怎么做吗？

Answer 1

无需重新加载页面

使用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

})}

Answer 2

您需要传递一个加法标记以跳过这样的位置更改 ''' this.router.navigate（['parentComponent'，id，type]，{skipLocationChange：true}）; '''

如何在角度6中刷新/重新加载子组件提交按钮的父组件onclick？

2 个答案: