移除组件本身

Posted 2023-02-23

【中文标题】移除组件本身

【英文标题】：Remove component itself

【发布时间】：2017-04-09 16:19:46

【问题描述】：

如果出现这个问题，我找不到解决办法。

我有 2 个组件：

@Component(
  selector: 'my-app',
  template : `
   <product *ngFor="let prod of products" [product]='product'>
  `
)
export class App 
    public products =['object',object]; //its only example of products objects array


@Component(
      selector: 'product',
      template : `
      <p>product.name</p>
      `
    )

export class App 
    @Input() product:any;

现在我如何删除一个特定的产品组件？可能组件可以自己做到这一点？ 我检查了这些帖子，但仍然没有任何想法 Angular 2 - Adding / Removing components on the fly 和 How to destroy all the Components created using DynamicComponentLoader in angular2?

在应用程序中，产品列表将从服务器下载并显示如下。我想添加一个按钮来从列表中删除它自己的单个产品。现在我有一个从服务器中删除这个产品的功能，但我认为再次下载产品列表是一个愚蠢的想法。所以我认为最好使用 ElemntRef 或 ComponentRef 从 DOM 中删除它

【问题讨论】：

products 只是一个本地副本。如果从那里删除它，它不会从服务器中删除。这听起来根本不像是自己删除元素的用例。在 Angular2 中，首选的方法是更新模型并让诸如 *ngFor、*ngIf、*ngSwitchCase 之类的指令进行 DOM 更新。

我有一个功能可以删除服务器上的产品，但我不想再次重新加载列表。

【参考方案1】：

只需从products 中删除该项目，<product> 组件就会被*ngFor 删除。

除此之外，没有办法删除 Angular2 添加的组件。您只能删除自己添加的组件。

【讨论】：

在应用程序中，产品列表将从服务器下载并显示如下。我想添加一个按钮来从列表中删除它自己的单个产品。现在我有一个从服务器中删除这个产品的功能，但我认为再次下载产品列表是一个愚蠢的想法。所以我认为最好使用 ElemntRef 或 ComponentRef 将其从 DOM 中删除

见我上面的评论。无需再次下载。只需向服务器发送命令将其删除，并在products 数组中删除它。这样你就不需要再次获取数据，Angular2 会负责移除组件。

就是这样！谢谢你:)