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 是一个组件。

仅供参考：但是，如果您不想使用相同的值名称，则可以使用下一个代码来使用友好命名。

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

编辑： 与此问题相关的案例实际上并不反对DRY。对于组件来说，这里需要重复。有些事情需要弄清楚。如果根据条件渲染/不渲染组件，则团队中的人们会直观地认为是使用模板中的ngIf完成的。如果不是它应该在的地方，那么实际上就是代码可读性的折衷，除非它是每个人都知道它通过提供的数据来处理ngIf的工作（呈现逻辑）的特定组件。

从组件输入中得出ngIf值

2 个答案: