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

Posted 2023-03-13

【中文标题】是否可以确定单击组件时将显示哪个模态/组件？

【英文标题】：Is it possible to determine which modal / component I will show when I click on a component?

【发布时间】：2018-12-29 16:56:40

【问题描述】：

我正在做一个小型 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 个不同的模式（不同的组件），所以基本上如果产品定义了一些属性而不是显示数量信息，否则显示产品信息，并且数量信息和产品信息是分开的组件..

谢谢大家 干杯

【问题讨论】：

编写一个方法并在（onInfoEdit）或（单击）上调用它：(onInfoEdit)="showModals($event)" 在该方法中，检查不同的条件，然后显示所需的模式。

【参考方案1】：

你会看到这样的东西：

<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 组件中定义的一个对象。

另请注意，不推荐模板内的条件语句，应携带到组件中。

【参考方案2】：

您可以通过创建将有条件地呈现两个组件之一的组件来做到这一点。一个条件将加载info 组件，另一个条件将加载quantity 组件。让我们将此条件模式称为：food-modal，在food-modal.component.html 模板内，代码可能如下所示：

<h1>CONDITIONAL MODAL CONTAINER</h1>
<ng-container *ngIf="product.name === 'Chicken'">
    <app-info [product]="product"></app-info>
</ng-container>
<ng-container *ngIf="product.name === 'Cow'">
    <app-quantity [product]="product"></app-quantity>
</ng-container>

在food-modal.component.ts 内部，代码可能如下所示：

import  Component, OnInit, Input  from '@angular/core';
import  Product  from '../models/Product.model';

@Component(
  selector: 'app-food-modal',
  templateUrl: './food-modal.component.html',
  styleUrls: ['./food-modal.component.css']
)
export class FoodModalComponent implements OnInit 
  @Input()
  public product: Product;

  constructor() 

  ngOnInit() 

你现在要做的就是在你想要的地方调用这个组件并传入Product模型。为了演示，我将把所有内容都放在app 组件中，以便加载food-modal。 app.component.html 可能看起来像：

 <app-food-modal [product]="chickenProduct">
 </app-food-modal>

app.component.ts 内部的代码可能是这样的：

import  Component  from '@angular/core';
import  Product  from './models/Product.model';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  public chickenProduct: Product;

  constructor() 
    this.chickenProduct = 
        id: 1,
        quantity: 2,
        name: 'Chicken'
    ;
  

现在app 组件会将名为chickenProduct 的Product 对象传递给food-modal 组件并将其绑定到模态的product 属性。之后会进行条件渲染。

其余代码可能如下所示：

info.component.html：

<p>
 This modal is for INFO. Product name is:  product.name 
</p>

info.component.ts：

import  Component, OnInit, Input  from '@angular/core';
import  Product  from '../models/Product.model';

@Component(
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
)
export class InfoComponent implements OnInit 
  @Input()
  public product: Product;

  constructor()  

  ngOnInit() 
  

quantity.component.html：

<p>
 This modal is for QUANTITY. Product name is:  product.name 
</p>

quantity.component.ts：

import  Component, OnInit, Input  from '@angular/core';
import  Product  from '../models/Product.model';

@Component(
  selector: 'app-quantity',
  templateUrl: './quantity.component.html',
  styleUrls: ['./quantity.component.css']
)
export class QuantityComponent implements OnInit 
  @Input()
  public product: Product;

  constructor()  

  ngOnInit() 
  

product.model.ts：

export interface Product 
  id: number;
  quantity: number;
  name: string;

我已经实施了这样的解决方案，一切正常！将产品的name 属性更改为Cow，条件触发将发生并加载quantity 组件，将其带回Chicken，条件触发将加载info 组件。

我假设您只是想知道如何触发条件触发，这就是为什么我通过硬编码字符串来完成此操作，检查产品名称是Chicken 还是Cow。