Thay đổi kiểu của các phần tử giả trong angular2

Question

Có thể thay đổi kiểu phần tử giả bằng cách sử dụng [style] hoặc [ngStyle] trong angular2?

để có hiệu ứng mờ ảo trên div hoạt động như lớp phủ và tôi nên thiết lập hình nền trên phần tử giả.

tôi đã cố gắng một cái gì đó giống như

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ')'"> 

nó đã không làm việc. Tôi cũng đã thử điều này

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ')}}'"> 

Answer 1

Không thể thực hiện được. Nó thực sự không phải là một vấn đề góc: các phần tử giả không phải là một phần của cây DOM và do đó không hiển thị bất kỳ API DOM nào có thể được sử dụng để tương tác với chúng.

Cách tiếp cận thông thường nếu bạn muốn xử lý các phần tử giả lập trình là gián tiếp: bạn thêm/xóa/thay đổi lớp và trong CSS làm cho lớp này ảnh hưởng đến phần tử giả tương ứng. Vì vậy, trong trường hợp của bạn, bạn có thể có một lớp nữa mà thay đổi phong cách cần thiết:

.blur:before {/* some styles */} 
.blur.background:before {/* set background */} 

Bây giờ tất cả các bạn cần làm là để chuyển .background lớp trên phần tử khi bạn cần before giả yếu tố để có được một nền tảng. Bạn có thể sử dụng NgClass, ví dụ.

Answer 2

Bạn có thể đạt được những gì bạn cần với các biến CSS.

Trong style sheet của bạn, bạn có thể thiết lập hình nền như thế này:

.featured-image:after  { content: ''; 
          background-image: var(--featured-image); } 

Sau đó bạn programatically có thể thiết lập biến này trên cùng một nguyên tố hoặc trên một cao lên cây DOM:

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}"> 

Tìm hiểu thêm về các biến CSS tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Lưu ý rằng hỗ trợ trình duyệt chưa hoàn tất.

Cũng lưu ý rằng bạn sẽ cần phải tiêu hủy tài url/phong cách sử dụng sanitizer.bypassSecurityTrustResourceUrl(path) hoặc sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):