Cách tạo kiểu góc bên trongHTML

Tại sao một số kiểu của bạn không còn hoạt động khi sử dụng

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

4 để hiển thị một số nội dung HTML? . Đây là một tính năng tuyệt vời - nhưng có một lỗi/tính năng khá khó chịu ở chỗ nếu bạn có các phần tử có kiểu nội tuyến, thì các kiểu đó sẽ bị xóa khỏi trang của bạn. Đánh giá theo số lượng câu hỏi về cách tắt nó - rõ ràng nó có những thiếu sót. Điều đó nói rằng, tôi đánh giá cao các nhà phát triển Angular đã xây dựng điều này để bảo vệ phần lớn chúng ta khỏi làm điều gì đó ngớ ngẩn trong ứng dụng web của họ

Cách tiếp cận đơn giản nhất là vô hiệu hóa DOMSanitizer và cách tiếp cận được khuyến nghị trên Stack Overflow là tạo một đường dẫn

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

7 để bạn có thể viết

Đó là một vài dòng mã nếu bạn chỉ muốn thả nó vào - xem câu trả lời tại đây

Nhưng trước khi chuyển ngay sang một giải pháp vô hiệu hóa tính năng bảo mật được bật theo mặc định, hãy nghĩ về những gì chúng ta đang làm trong giây lát

Tại sao lại vô hiệu hóa nó?

Trường hợp sử dụng mà tôi (và rõ ràng là nhiều người khác) có là tôi muốn hiển thị nội dung HTML do người dùng tạo - từ các đoạn mã nhỏ đến toàn bộ trang HTML. Vấn đề là

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

5 đang loại bỏ quá nhiều HTML của tôi và không có cách nào để định cấu hình các quy tắc của nó. Trong trường hợp của tôi, tôi có

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

9 nhịp với các thuộc tính kiểu nội tuyến cũng như một

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

9

Tôi nhận được một đoạn mã HTML từ lệnh gọi HTTP. Tôi đặt các khối HTML vào một biến và chèn nó vào trang của mình bằng [innerHTML] nhưng tôi không thể tạo kiểu cho khối HTML đã chèn. Có ai có bất cứ đề nghị làm thế nào tôi có thể đạt được điều này?

@Component({
  selector: 'calendar',
  template: '
',
  providers: [HomeService], 
  styles: [`h3 { color: red; }`]
})

HTML mà tôi muốn tạo kiểu là khối chứa trong biến "lịch"

Giải pháp tốt nhất

cập nhật 2

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

1

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

1 hiện được hỗ trợ bởi tất cả các trình duyệt mới và có thể được sử dụng với

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

3

https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/. xẻ rãnh

cập nhật 1. ng-sâu

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

4 không được dùng nữa và được thay thế bằng

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

0

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

0 cũng đã được đánh dấu là không dùng nữa, nhưng vẫn chưa có sản phẩm thay thế nào

Khi

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

2 được tất cả các trình duyệt hỗ trợ đúng cách và hỗ trợ tạo kiểu trên các ranh giới DOM bóng tối, thì

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

0 có thể sẽ bị ngừng

nguyên

Angular thêm tất cả các loại lớp CSS vào HTML, nó thêm vào DOM để mô phỏng đóng gói CSS DOM bóng tối để ngăn chặn các kiểu chảy vào và ra khỏi các thành phần. Angular cũng viết lại CSS mà bạn thêm vào để phù hợp với các lớp đã thêm này. Đối với HTML được thêm bằng cách sử dụng

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

4, các lớp này không được thêm vào và CSS được viết lại không khớp

Như một giải pháp thay thế, hãy thử

• cho CSS được thêm vào thành phần

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

• cho CSS được thêm vào

  /* :host /deep/ mySelector { */
  :host ::ng-deep mySelector { 
    background-color: blue;
  }
  

  5

________số 8

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

6 (và tương đương

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

4 nhưng

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

4 hoạt động tốt hơn với SASS) và

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

9 đã được thêm vào trong 2. 0. 0-thử nghiệm. 10. Chúng tương tự như các bộ kết hợp CSS DOM bóng tối (không được dùng nữa) và chỉ hoạt động với

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

0, mặc định trong Angular2. Họ có thể cũng làm việc với

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

1 nhưng sau đó chỉ bị bỏ qua vì không cần thiết. Các bộ kết hợp này chỉ là một giải pháp trung gian cho đến khi các tính năng nâng cao hơn cho kiểu dáng giữa các thành phần được hỗ trợ

Một cách tiếp cận khác là sử dụng

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

3

cho tất cả các thành phần chặn CSS của bạn (tùy thuộc vào vị trí bạn thêm CSS và vị trí HTML mà bạn muốn tạo kiểu - có thể là tất cả các thành phần trong ứng dụng của bạn)

Có an toàn khi sử dụng InternalHTML trong Angular không?

Làm cách nào để đưa HTML vào thành phần Angular?