My goal is to set a style (height and width in this case) from a component variable using the "styles" attribute. I would think there is a simple data binding method but that may be wishful thinking...
For example if I were using the html mustache binding it might look like this:
@Component({
selector: '[sidebar]',
templateUrl: 'app/Nav/sidebar.comp.html',
styles: [`
.sidebar-nav {
overflow: scroll;
height: {{ height }};
}
.sidebar {
height: {{ 0.9 * height }};
width: {{ 0.21 * width }};
}
`]
})
export class SidebarComp {
width: number;
height: number;
constructor() {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
}
Obviously this is all wrong but I've tried some more likely permutations and had no luck finding solutions on the Angular site, Stack Overflow, or Google. I may be reduced to using ngStyle inline but that's not ideal in this case.
You can style the host element like
@Component({
selector: '[sidebar]',
templateUrl: 'app/Nav/sidebar.comp.html',
host: {
'[style.height.px]':'0.9 * height',
'[style.width.px]':'0.21 * width'
}
})
export class SidebarComp {
width: number;
height: number;
constructor() {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
}
and the content ( app/Nav/sidebar.comp.html
) like
<div class="sidebar-nav" [style.overflow]="'scroll'" [style.height.px]="height">
or
<div class="sidebar-nav" [ngStyle]="{overflow: 'scroll', height: height + 'px'}">
如果您使用百分比 (%) 试试这个:
<div class="sidebar-nav" [style.height.%]="height">
In my case, I need change image style dynamic switch between px and % unit.
So I use [ngStyle]
instead of [style.height.px]
I share for whom concern.
HTML
<img [src]="imageUrl | safe: 'url'" [ngStyle]="{width: imagewidth, height: imageheight}">
TS
if (this.properties.imageStyle == 'Stretch') {
this.imagewidth = this.cols * this.unitWidth + 'px';
this.imageheight = this.rows * this.unitHeight + 'px';
}
if (this.properties.imageStyle == 'Clip') {
this.imagewidth = 100 + '%';
this.imageheight = 100 + '%';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.