Question

我正在做一个小的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个不同的模态（不同的组件），因此基本上，如果产品具有定义的某些属性而不是显示数量信息，否则显示产品信息，并且数量信息和产品信息是独立的组件。

谢谢大家干杯

Answer 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>

其中“属性”将是“产品”的属性，这将是您在“产品项目组件”中定义的对象。

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

Answer 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 ，条件射击将加载{ {1}}组件。

我假设您只是想知道如何触发条件触发，所以这就是为什么我通过对字符串进行硬编码，检查产品名称是info还是Chicken来做到这一点的原因。

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

2 个答案: