Скрыть компонент на основе внутреннего значения

#angular

Вопрос:

В своем компоненте я вызываю службу. Когда результат будет пустым, я хочу установить для компонента значение «скрытый», потому что мне не нужен пустой столбец начальной загрузки.

 <app-streams class="col-6" [hidden]="hideComponent"</app-streams>
 

Я попытался установить переменную @output, но это не сработало.

 @Output() hideComponent: boolean = false

ngOnInit(): void {
    this.hideComponent = true
  }

 

P.S. Класс ‘col-6’ должен быть на этом уровне, потому что вложенный в шаблон компонента он не работает.

Есть какие-нибудь идеи?

Комментарии:

1. Вы Пробовали Поставить *ngIf..?

2. @jesvinpalatty Да, но переменная hideComponent не существует на этом уровне.

Ответ №1:

Один из способов заключается в том, что вы можете ссылаться на значение переменной дочернего компонента из родительского:

  • В дочернем компоненте выполните следующие действия:
   hideComponent: boolean = false;

  ngOnInit(): void {
    this.hideComponent = true;
  }
 
  • Внутри родителя вы можете сделать:
 <app-streams
  #appstreams
  class="col-6"
  [style.display]="appstreams.hideComponent ? 'none' : 'block'"
></app-streams>
 

Рабочий пример: https://stackblitz.com/edit/angular-ivy-xghere?

Другой способ решения этой проблемы-использовать two way binding для совместного использования переменной hideComponent между родителем и ребенком следующим образом:

   @Input() hideComponent: boolean = false;
  @Output() hideComponentChange = new EventEmitter<boolean>();

  ngOnInit(): void {
    this.hideComponentChange.emit(true);
  }
 

В родительском компоненте вы можете сделать:

 <app-streams
  class="col-6"
  [(hideComponent)]="hideComponent"
  *ngIf="!hideComponent"
></app-streams>
 

Рабочий пример: https://stackblitz.com/edit/angular-ivy-tnr5fs?

Комментарии:

1. Спасибо! Но у меня есть много динамических компонентов, которые все являются <потоками приложений>. Я пропустил их вклад из-за ясности в вопросах. Как это сделать?

2. @A. Nurb Тогда лучше использовать ссылочные переменные в первом примере #appstreams. Таким образом, у вас будет несколько компонентов с разными ссылками, такими как #appstreams1, #appstreams2 и т.д., И вы скроете их, как в первом компоненте. Пожалуйста, проверьте stackblitz.com/edit/angular-ivy-xghere например

Ответ №2:

Я бы перевернул логику и применил ngIf к div с классом col, чтобы в нем размещался компонент. Таким образом, вы получаете div только в том случае, если он не скрыт, и компоненту не нужно беспокоиться о логике представления.

 <div  class="col-6" *ngIf="!hideComponent">
    <app-streams></app-streams>
</div>
 

И если у вас нет такой структуры, вы можете HostBind() создать класс для родителя на основе переменной в дочернем элементе.

Ответ №3:

Вы можете установить атрибут стиля видимости с помощью привязки стиля:

 <app-streams class="col-6" [style.visibility]="hideComponent? 'visible' : 'hidden'"</app-streams>
 

В компоненте при подписке на услугу установите hideComponent = true , если результат false в противном случае пуст.

Комментарии:

1. Но проблема в том, что переменная не известна. Я получаю эту ошибку: «Свойство ‘hideComponent’ не существует для типа ‘ParentComponent'».

2. Как вы вызываете службу в своем компоненте?