Передача значений из родительского компонента в дочерний компонент в angular
Я пытаюсь создать компонент angular, который отображает изображение на основе src, ширины и высоты, предоставленных родительским элементом.
Это мой код:
my-image-logo.component.html
<img #imgDiv src = "{{name}}" >
my-image-logo.component.ts
export class MyImageLogoComponent implements OnInit {
@Input() name;
@Input() width = "100px";
@Input() height = "100px";
@ViewChild("imgDiv") imgDiv: ElementRef;
constructor() { }
ngOnInit() {
this.imgDiv.nativeElement.setAttribute("width", this.width);
this.imgDiv.nativeElement.setAttribute("height", this.height);
}
}
родительский-компонент.html
<app-my-image-logo [name] = "userDetails.profilePic" [width] = "'50px;'" [height] = "'50px;'"></app-my-image-logo>
Это работает отлично, но я пытался не инициализировать width и height в ngOnInit, а использовать ngStyle следующим образом:
<img [ngStyle] = "{'width': width, 'height': height}" src = "{{name}}" >
Но это не работает. Я даже пробовал следующее, но даже это не работает:
<img width = "{{width}}" height = "{{height}}" src = "{{name}}" >
Что я делаю неправильно? Кроме того, это правильный способ назначить стили css для компонентов?
Спасибо, но я пробовал, это не работает. При осмотре вижу, что получаю width = "0" height = "0"
Вы видели stackblitz? Это ваш исходный код (как показано в моем предыдущем комментарии), и он работает.
@ConnorsFan Спасибо, да, работает, пробовал с [width] = "width" [height] = "height".
Ответы 3
Вы можете поделиться родительским файлом css с дочерним с помощью:
@Component({
selector: 'lions',
templateUrl: 'lions.component.html',
styleUrls: ['lions.component.css', '../zoo.component.css']
})
(зоопарк - родитель, лев - ребенок)
Но в вашем случае я бы просто установил дочернюю ширину и высоту на 100%, например, в lion.css:
:host() { width: 100%; height: 100% }
(:host() означает корневой тег вашего компонента)
В вашем дочернем компоненте вам нужно будет изменить HTML на
<img [width] = "width" [height] = "height" [src] = "name" >
Спасибо, но не работает. При осмотре вижу, что получаю width = "0" height = "0"
Вы можете изменить атрибуты, выполнив это (в своем дочернем компоненте):
<img [attr.width] = "width" [attr.height] = "height">
Ваш код должен работать с
<app-my-image-logo [width] = "'50px'" [height] = "'50px'" ...>(без;). См. этот stackblitz.