Angular 5. 检查子组件中的父 *ngIf

Posted 2023-02-23

【中文标题】Angular 5. 检查子组件中的父 *ngIf

【英文标题】：Angular 5. Checking parents *ngIf in children component

【发布时间】：2018-09-15 00:38:11

【问题描述】：

我有两个页面（diary.component和redactor.component）都绘制了相同的组件food.component，只是差别很小：如果是 diary.component - 食物应该有一个“添加按钮”。如果是 redactor.component - 食物应该有一个删除按钮。我尝试使用父组件中的布尔值来解决这个问题，并使用 *ngIf 在 food.component.html 中检查此状态，但它不起作用。什么问题，我该如何解决？ 这是我的代码以便更好地理解：

diary.component.ts

isDiary: boolean;
ngOnInit() 
    this.isDiary = true;

food.component.html

<div class="food">

  <button *ngIf="isDiary; else isRedactor" (click)="sendFood(food.name, food.nutritional_value)" class="add-btn" type="button">
    <i class="fas fa-plus"></i>
  </button>

  <ng-template #isRedactor>
    <button><i class="fas fa-times"></i></button>
  </ng-template>
  ...
</div>

谢谢！

【问题讨论】：

所以 food.component.html 是 diary.component 和 redactor.component 都显示的模板？您可以尝试 *ngIf="isDiary === true; else isRedactor" 另一个选项不是在 ngOnInit() 中将 isDiary 设置为 true，而是在声明时分配它。

没错！但在不起作用。我已经使用 *ngIf 进行了检查。也许，这是上下文的问题......因为我从其他组件检查状态......我不知道

【参考方案1】：

你必须创造

@Input() isDiary: boolean;

在 food.component.ts 内部并像这样从父级传递值

<your-food-component [isDiary]="isDiary"></your-food-component>

【参考方案2】：

所以我假设它现在总是显示添加按钮？

这是可以理解的，因为您在 ngOnInit 中将布尔值设置为 true，这将始终在组件初始化时发生！

基本上您想要的可能是@Input 的定义（https://angular.io/guide/component 交互），因此您可以有条件地从父级传递它！

使用这种方式，您可以在应该显示添加按钮的父级中提供 true，在应该采用 else 路径的父级中提供 false！