Question

我有两个页面（ diary.component 和 redactor.component ）都绘制了相同的组件 food.component ，只有很小的区别：如果它是 diary.component - 食物应该有一个“添加按钮”。如果是 redactor.component - 食物应该有一个删除按钮。我尝试在父组件中使用boolean解决此问题，并使用* 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>

谢谢！

Answer 1

你必须创建

@Input() isDiary: boolean;

在food.component.ts中，并传递来自parent的值，如此

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

Answer 2

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

这是可以理解的，因为你在ngOnInit中将boolean设置为true，这在组件初始化时总会发生！

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

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

Angular 5.检查父项* ngIf in children组件

2 个答案: