从组件输入中导出 ngIf 值

Question

当我想在缺少某些输入的情况下从树中删除一个组件时，我需要在组件声明中指定它两次，如下所示：

   <app-block-with-some-data *ngIf="dataForBlock" [data]="dataForBlock">
   </app-block-with-some-data>

我想在保持相同行为的同时删除重复项。

如何实现？

这里StackBlitz demo了解详情。

Answer 1

那是不可能的，因为 ngIf 是一个指令，app-block-with-some-data 是一个组件。

仅供参考：但是如果您不想使用与您的值相同的名称，您可以使用下一个代码来使用 friendly-naming。

<app-block-with-some-data
    *ngIf="dataForBlock; let data"
    [data]="data"
></app-block-with-some-data>

Answer 2

事实上，您可以使用数据输入属性绑定到 app-block-with-some-data 组件模板中的 ngif。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'data-component',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
Input() data: string;

组件模板：

<div *ngIf = "data">
...
</div>

编辑： 这个问题相关的case其实并不反对DRY。这里的重复对于组件是必要的。有些事情需要弄清楚。如果一个组件是 rendered/unrendered 取决于条件，你的团队中的人会直觉地认为它是用模板内的 ngIf 完成的。如果它不在它应该在的位置那么它实际上是 code-readability 的权衡，除非它是一个特定的组件，其他人都知道它通过提供的数据处理 ngIf 的工作（渲染逻辑）。

从组件输入中导出 ngIf 值

Derive ngIf value from component input

angular-ng-if

angular