Получите значение 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.

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>

EDIT: Дело, связанное с этим вопросом, на самом деле не против СУХОГО. Повторение здесь необходимо для компонентов. Некоторые вещи должны быть понятны. Если компонент отображается / не обрабатывается в зависимости от условия, люди в вашей команде интуитивно предположили бы, что это сделано с помощью ngIf внутри шаблона. Если это не то место, где он должен быть, то это фактически компромисс для читабельности кода, если только это не конкретный компонент, о котором все остальные знают, что он обрабатывает задание ngIf (логику рендеринга) с помощью предоставленных данных.

Answer 2

Это невозможно, потому что ngIf является директивой, app-block-with-some-data является компонентом.

К вашему сведению: но вы можете использовать следующий код, чтобы использовать дружественные имена, если вы не хотите использовать те же имена, что и ваши значения.

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