Áp dụng chỉ thị thuộc tính vào thành phần trong Angular 4

Question

Tôi đã tạo thành phần img-pop có @Input() liên kết thuộc tính src. Tôi đã tạo chỉ thị authSrc có tài sản @HostBinding() src.

@Component({ 
selector: 'img-pop', 

template: `<img [src]="src"/> 
      <div *ngIf="isShow"> 
       <----extra value-----> 
      </div>` 
}) 

export class ImgPopOverComponent implements OnInit { 

@Input() 
private src; 

private isShow=false; 

@HostListener('mouseenter') onMouseEnter() { 
    this.isShow= true; 
} 

@HostListener('mouseleave') onMouseLeave() { 
    this.isShow= false; 
} 

} 

Tôi có chỉ thị như thế này.

@Directive({ selector: '[authSrc]' }) 
export class AuthSrcDirective implements OnInit { 

@HostBinding() 
private src: string; 

constructor(private element: ElementRef) { } 

ngOnInit() { } 

    @Input() 
    set authSrc(src) { 
    this.src = src+"?access_token=<-token->"; 
    } 
} 

tôi muốn kết hợp cả hai chức năng giống nhau.

<img-pop [authSrc]="/api/url/to/image"></img-pop> 

để url cuộc gọi cuối cùng sẽ được/api/url/to/hình ảnh access_token = < --token ->

nhưng nó ném Can't bind to 'src' since it isn't a known property of 'img-pop'. lỗi

plnkr link

Hãy sửa tôi nếu tôi sai với khái niệm.

Cảm ơn bạn.

Answer 1

Theo số this answer bởi người đóng góp cốt lõi, không thể đặt thuộc tính trực tiếp của thành phần bằng cách sử dụng @HostBinding. @HostBinding luôn liên kết trực tiếp với DOM. Đây là thiết kế. Dưới đây là lời giải thích:

này làm việc như dự định, như:

• sử dụng dữ liệu ràng buộc để giao tiếp giữa các chỉ thị/thành phần trên cùng một nguyên tố là chậm hơn so với giao tiếp trực tiếp bằng cách làm cho một tiêm khác dữ liệu
• ràng buộc giữa các chỉ thị dễ dàng dẫn đến các chu kỳ .

Vì vậy, trong trường hợp của bạn, đây là giải pháp khả thi:

export class AuthSrcDirective { 
    // inject host component 
    constructor(private c: ImgPopOverComponent) { } 

    @Input() 
    set authSrc(src) { 
     // write the property directly 
     this.c.src = src + "?access_token=<-token->"; 
    } 
} 

Đối với một cách tiếp cận chung chung hơn, xem this.

Answer 2

Chỉ thị chỉ được khởi tạo cho các bộ chọn khớp với HTML được thêm vào các mẫu thành phần tĩnh.
Không có cách nào để thêm/xóa chỉ thị từ một phần tử động. Cách duy nhất là thêm/xóa toàn bộ phần tử (ví dụ: sử dụng *ngIf