如何在Angular 6中重新加载/刷新动态注入的组件

Question

我正在尝试根据用户在下拉菜单中选择的值动态注入组件。

我的要求是，每当用户更改下拉列表的值并单击查看时，组件就会被注入，但是如果用户更改下拉列表的值并再次单击查看，则应重新呈现相同的注入组件，而不是注入一个新的组件。

我们是否有办法实现这一点。

注意：在下拉菜单更改时，将调用服务并从服务器返回不同的数据。

问题的Stackblitz链接：https://stackblitz.com/edit/angular-cszxfs?file=src%2Fapp%2Fapp.component.ts 提前致谢。

- Amit

---

“刷新”组件是什么鬼？ - Reactgular

@cgTag 我的意思是组件应该使用新数据重新渲染。 - Amit

@cgTag 编辑了我的帖子。 - Amit

为什么需要根据下拉列表的值动态注入组件？ngIf或hide属性无法实现此功能吗？ - gabriela

有没有办法可以找到并删除注入的组件？ - Amit

Answer 1

首先，我正在删除组件，然后将其重新添加到视图中：

以下是我的代码：

 renderTreeListReport(element: string) {
   this.removeComponents();
   const component = resultComponent[element];
   const factory = this.resolver.resolveComponentFactory<any>(component);
   this.component = this.resultcontainer.createComponent(factory);
   this.components.push(this.component);//for tracking the components created
   this.component.instance.config = this.config;
   this.component.instance.pagingInfo = this.pageble;
 }


 public removeComponents() {
   const components = this.components;
   if (components.length > 0) {
     components.forEach(comp => {
       this.resultcontainer.remove(components[comp])
     })
   }
 }

- Amit

Answer 2

<div *ngIf="somecondition">
<app-componentOne></app-componentOne>
</div>

<div *ngIf="somecondition">
<app-componentTwo></app-componentTwo>
</div>

like that you can import more that one component on selection of dropdown in ng if just manage your condition if that is true accordingly component will display..

- user10105289

---

谢谢回复，但这不是我要找的。 - Amit