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

Question

我有两个页面(diary.component和redactor.component)都绘制相同的组件food.component,只有很小的区别:如果是diary.component- 食物应该有一个"添加按钮".如果是redactor.component- 食物应该有一个删除按钮.我尝试在父组件中food.component.html使用boolean解决此问题,并使用*ngIf 检查此状态,但它不起作用.问题是什么,我该如何解决？这是我的代码,以便更好地理解:

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中,并从父类传递值,如此

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