时间戳

首页 > 解决方案 > 是否可以确定单击组件时将显示哪个模态/组件？

javascript - 是否可以确定单击组件时将显示哪个模态/组件？

问题描述

我正在研究小型 Angular 5 项目，我有一个简单的组件，它代表一种食品，它看起来像这样：

[![在此处输入图像描述][1]][1]

这个组件是嵌套组件，它是我的主要组件的一部分。

当我点击这个组件时，会显示数量组件/模态：

<app-product-item (onInfoEdit)="InfoModal.show($event)"></app-product-item>

但是现在我想显示另一个模态，如果满足某些条件，例如

如果满足条件，则显示此数量模态（即组件本身），否则显示另一个模态（即另一个组件），因此：

 <app-product-item "if something is satisfied than this code on the right is ok otherwise lets display another modal with different method" (onInfoEdit)="InfoModal.show($event) (onSomethingElse)="AnotherModal.show($event)></app-product-item>

所以我不确定这是否可能，因为我需要在同一个组件的点击上显示 2 个不同的模式（不同的组件），所以基本上如果产品定义了一些属性而不是显示数量信息，否则显示产品信息和数量信息和产品信息是独立的组件..

谢谢大家干杯

标签： javascripthtmlangularangular-components

解决方案

你会看到这样的东西：

<app-product-item #productItem 
                  (click)="productItem?.product?.property ? InfoModal.show($event) : AnotherModal.show($event)"
                  (onInfoEdit)="InfoModal.show($event)"
                  (onSomethingElse)="AnotherModal.show($event)">
</app-product-item>

其中“property”是“product”的一个属性，它是在您的 Product Item 组件中定义的一个对象。

另请注意，不建议使用模板内的条件语句，应将其带到组件中。

推荐阅读