Angular +2如何单独重载组件不影响其他？提交后重载CKEditor组件

针对你提到的两个Angular组件重载需求，我来分享一下项目里常用的实用方案，尤其是像你说的CKEditor提交后重载这类场景，这些方法非常好用：

1. 重载单个组件且不影响其他组件 #

Angular里最直接且安全的方式，是利用*ngIf指令触发组件的销毁与重建——当*ngIf值变为false时，组件会被完全销毁；变回true时，组件会重新初始化，实现“重载”效果，而且完全不会影响页面上的其他组件。

具体实现： #

• 在父组件里定义一个布尔变量，用来控制目标组件的显示状态：

  // 父组件.ts文件
  reloadTargetComponent = true;
  

• 在模板中给目标组件绑定*ngIf：

  <!-- 父组件.html文件 -->
  <app-target-component *ngIf="reloadTargetComponent"></app-target-component>
  <!-- 页面上的其他组件不受任何影响 -->
  <app-other-component-1></app-other-component-1>
  <app-other-component-2></app-other-component-2>
  

• 编写重载方法，通过切换变量值触发组件重建：

  reloadComponent() {
    // 先隐藏组件，触发Angular销毁该组件实例
    this.reloadTargetComponent = false;
    // 用setTimeout让Angular完成变更检测后，再重新显示组件
    setTimeout(() => {
      this.reloadTargetComponent = true;
    }, 100);
  }
  

这个方法的核心是利用Angular的生命周期钩子：组件销毁时会执行ngOnDestroy()，重建时会重新走ngOnInit()等初始化流程，完美实现“重载”的效果。

2. 触发onSubmit或特定函数后重载指定组件（如CKEditor） #

结合上面的*ngIf方案，我们可以很轻松地在提交事件或自定义函数中触发指定组件的重载。以你提到的CKEditor组件为例：

具体实现： #

• 父组件中定义控制CKEditor显示的变量：

  // 父组件.ts文件
  shouldReloadCKEditor = true;
  

• 模板中绑定CKEditor组件的*ngIf，同时保留其他组件：

  <!-- 父组件.html文件 -->
  <app-ck-editor *ngIf="shouldReloadCKEditor"></app-ck-editor>
  <app-component-a></app-component-a>
  <app-component-b></app-component-b>
  
  <!-- 提交按钮，触发onSubmit事件 -->
  <button (click)="onSubmit()">提交当前主题</button>
  

• 在提交方法中执行业务逻辑后，调用重载CKEditor的方法：

  onSubmit() {
    // 1. 先执行你的提交逻辑（比如把编辑的主题保存到后端）
    this.saveCurrentTheme().subscribe(() => {
      // 2. 提交成功后，触发CKEditor的重载
      this.reloadCKEditor();
    });
  }
  
  reloadCKEditor() {
    this.shouldReloadCKEditor = false;
    setTimeout(() => {
      this.shouldReloadCKEditor = true;
      // 如果需要，这里可以额外通过ViewChild获取CKEditor实例，调用内部的重置方法
      // 确保重建后是干净的编辑环境
    }, 100);
  }
  

额外优化建议： #

如果你的CKEditor组件有初始化默认内容的逻辑，记得把这部分逻辑放在ngOnInit()里，这样组件重建后会自动加载干净的编辑状态，方便直接编写新主题。

内容的提问来源于stack exchange，提问作者Yazan Mehrez