Angular2: Thuộc tính máy chủ thành phần

Question

Điều gì hiện @Component.host tài sản đứng cho?

Theo Angular2 documentation nó là viết tắt của:

chủ - Bản đồ tài sản lớp để lưu trữ các ràng buộc yếu tố cho các sự kiện, tài sản và các thuộc tính.

Tôi không tìm hiểu điều đó là gì?

Tôi đang đặt mục này để hiểu mã công cụ mà tôi đã gặp trong những ngày qua.

Mã này là:

@Component({ 
    selector: 'layout', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './layout.template.html', 
    host: { 
    '[class.nav-static]' : 'config.state["nav-static"]', 
    '[class.chat-sidebar-opened]' : 'chatOpened', 
    '[class.app]' : 'true', 
    id: 'app' 
    } 
}) 
export class Layout { 

Answer 1

Tôi đã thêm lớp để lưu trữ thẻ.

Giống như sau:

• Component

   
  @Component({ 
      selector: 'mytag', 
      templateUrl: './layout.template.html', 
      host: { 
      'class' : 'myclass1 myclass2 myclass3' 
      } 
  }) 
  export class MyTagComponent { 
  

• Xem đang

  <mytag></mytag>

• quả

  <mytag class="myclass1 myclass2 myclass3"></mytag>

Answer 2

dựa trên this tài liệu, các tính chất chỉ thị bên trong sở hữu máy chủ của bạn ([class.nav-static], [class.chat-sidebar-opened] và [class.app] trong đoạn mã của bạn) nên thay đổi bất cứ khi nào biểu thức giá trị tương ứng của họ có được sự thay đổi.

Ví dụ: thuộc tính [class.nav-static] của bạn sẽ nhận được giá trị của biểu thức 'config.state["nav-static"]' và nó sẽ được cập nhật bất cứ khi nào giá trị của biểu thức được cập nhật.

Answer 3

Thuộc tính máy chủ được sử dụng để ràng buộc các sự kiện cho tất cả các thuộc tính với lớp học đặc biệt component.See mã của tôi điều này sẽ giúp bạn như tôi muốn tập trung vào thành phần của tôi và tập trung ra khi không sử dụng

host: { 
    '(window:blur)': 'focusOutFunction($event)', 
    '(window:focus)': 'focusInFunction($event)', 
    } 

focusOutFunction này hoạt động khi cửa sổ mờ mà tôi đã liên kết với sự kiện (window:blur) và focusInFunction mà tôi đã liên kết với sự kiện (window:focus). Nó hoạt động trên toàn bộ thuộc tính của tôi được khai báo trong thành phần lớp này. Hy vọng điều này sẽ giúp bạn hiểu được