Đặt kiểu thành phần từ biến trong Angular 2

Question

Mục tiêu của tôi là đặt kiểu (chiều cao và chiều rộng trong trường hợp này) từ biến thành phần bằng thuộc tính "kiểu". Tôi nghĩ rằng có một dữ liệu phương pháp ràng buộc đơn giản nhưng điều đó có thể mơ tưởng ...

Ví dụ nếu tôi đang sử dụng các ràng buộc nó ria mép html có thể trông như thế này:

@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; 
    } 
} 

Rõ ràng đây là tất cả sai, nhưng tôi đã thử một số hoán vị có khả năng hơn và không có may mắn tìm giải pháp trên trang web góc, Stack tràn hoặc Google. Tôi có thể được giảm xuống để sử dụng ngStyle nội tuyến nhưng đó không phải là lý tưởng trong trường hợp này.

Answer 1

Bạn có thể tạo kiểu các yếu tố chủ như

@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; 
    } 
} 

và nội dung (app/Nav/sidebar.comp.html) như

<div class="sidebar-nav" [style.overflow]="'scroll'" [style.height.px]="height"> 

hoặc

<div class="sidebar-nav" [ngStyle]="{overflow: 'scroll', height: height + 'px'}">