#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. Как вы вызываете службу в своем компоненте?