#angular
#angular
Вопрос:
У меня есть следующий mat-card
компонент в Angular, который отображает информацию о каждом prof
объекте:
<mat-card class="mat-elevation-z4">
<mat-card-header>
<mat-card-title>{{prof["fullName"].length > 15 ? prof['fullName'].slice(0, 15) '...' : prof['fullName']}}</mat-card-title>
</mat-card-header>
</mat-card>
Я хотел бы знать, могу ли я добавить изображение профиля prof['imageLink']
(которое является ссылкой на изображение) на основе текущей ширины mat-card
. Поэтому, если mat-card
он достигнет определенной высоты, он отобразит изображение, в противном случае нет.
Я знаю @media
, что запрос может быть полезен, но я показываю список prof
, в котором для каждого есть уникальная ссылка на изображение prof
Я был бы очень признателен за любую помощь.
Комментарии:
1. вы можете отображать на основе ширины или высоты, если да, будет ли это фиксированное значение?
2. Да, если ширина достигает фиксированного значения, тогда покажите изображение по ссылке на изображение
Ответ №1:
Вы можете обернуть свою карту внутри контейнера div, а затем вы можете получить ширину карты, используя offsetWidth
.
@ViewChild("myIdentifier") myIdentifier: ElementRef;
<div #myIdentifier>
<mat-card class="mat-elevation-z4">
<mat-card-header>
<mat-card-title>{{prof["fullName"].length > 15 ? prof['fullName'].slice(0, 15) '...' : prof['fullName']}}
</mat-card-title>
</mat-card-header>
<img [class.hide]="width < 500" mat-card-image [src]="prof.imageLink" alt="Photo of a Shiba Inu">
</mat-card>
</div>
Вам нужно использовать ngAfterViewInit
событие, чтобы получить ширину, так как только после отображения вида вы можете получить точную ширину.
ngAfterViewInit() {
this.width = this.myIdentifier.nativeElement.offsetWidth;
this.cdr.detectChanges();
}
Затем, основываясь на вашей предопределенной ширине, вы можете показать скрыть изображение профиля.
<img [class.hide]="width < 500" mat-card-image [src]="prof.imageLink"/>
Поскольку мы обновляем представление после инициализации представления. мы получим сообщение об ошибке «Выражение ___ изменилось после проверки«.
Чтобы избавиться от этой ошибки, нам нужно вручную вызвать обнаружение изменений.
this.cdr.detectChanges();
Правка1: обработка изменения размера страницы.
Если вы хотите сделать это адаптивным (при изменении размера страницы), вам необходимо обнаружить / привязать событие изменения размера браузера и обновить в нем свойство width, и оно будет работать.
ngOnInit() {
this.resizeObservable$ = fromEvent(window, "resize");
this.resizeSubscription$ = this.resizeObservable$.subscribe(evt => {
this.width = this.myIdentifier.nativeElement.offsetWidth;
});
}
Обязательно удалите подписку в компоненте методом onDestroy.
ngOnDestroy() {
this.resizeSubscription$.unsubscribe()
}
Демо обновлено с последними изменениями кода.
Комментарии:
1. Спасибо за ваш ответ, но это работает только при перезагрузке веб-страницы, могу ли я заставить его работать при изменении размера веб-страницы? Например, у меня есть компонент боковой панели, при открытии он уменьшает ширину мат-карты.
2. Я попытался с помощью этого кода: ` toggleSideNav() { this.opened = !this.opened; это. ширина = это. myIdentifier.nativeElement.offsetWidth; console.log(это. width); this.cdr.DetectChanges(); }` Но почему-то всегда консоль выводит предыдущее значение (значение перед открытием, которое больше), а не текущее значение ширины,