Angular2 - thêm [_ngcontent-mav-x] vào kiểu

Question

Tôi đang thiết lập một ứng dụng góc cơ bản và tôi đang cố gắng tiêm một số điểm css vào các chế độ xem của mình. Đây là ví dụ về một trong các thành phần của tôi:

import { Component } from 'angular2/core'; 
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router'; 

import { LandingComponent } from './landing.component'; 
import { PortfolioComponent } from './portfolio.component'; 

@Component({ 
    selector: 'portfolio-app', 
    templateUrl: '/app/views/template.html', 
    styleUrls: ['../app/styles/template.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true }, 
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent } 
]) 

export class AppComponent { } 

Bây giờ, tệp .css được yêu cầu từ máy chủ của tôi và khi tôi kiểm tra nguồn trang, tôi có thể thấy tệp này được thêm vào đầu. Nhưng một cái gì đó kỳ lạ đang xảy ra:

<style>@media (min-width: 768px) { 


    .outer[_ngcontent-mav-3] { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 
    .mainContainer[_ngcontent-mav-3] { 
     display: table-cell; 
     vertical-align: middle; 
    } 
    .appContainer[_ngcontent-mav-3] { 
     width: 95%; 
     border-radius: 50%; 
    } 
    .heightElement[_ngcontent-mav-3] { 
     height: 0; 
     padding-bottom: 100%; 
    } 
}</style> 

được tạo ra từ tập tin này:

/* Small devices (tablets, 768px and up) */ 

@media (min-width: 768px) { 
    /* center the mainContainer */ 

    .outer { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 
    .mainContainer { 
     display: table-cell; 
     vertical-align: middle; 
    } 
    .appContainer { 
     width: 95%; 
     border-radius: 50%; 
    } 
    .heightElement { 
     height: 0; 
     padding-bottom: 100%; 
    } 
} 

ai đó có thể vui lòng giải thích nơi thẻ _ngcontent-MAV đến từ đâu, những gì nó đại diện cho và làm thế nào để thoát khỏi nó?

Tôi nghĩ đây là lý do khiến phong cách của tôi không được áp dụng cho các mẫu của tôi.

Nếu bạn cần thêm thông tin về cấu trúc ứng dụng, vui lòng thanh toán số gitRepo của tôi hoặc hỏi và tôi sẽ thêm mã vào câu hỏi.

Cảm ơn sự giúp đỡ.

Answer 1

cập nhật

/deep/ và >>> đang bị phản đối. ::ng-deep thay thế chúng. ::-deep cũng được đánh dấu không được chấp nhận trong nguồn và tài liệu, nhưng điều này có nghĩa là nó sẽ được cuối cùng nhưng nó không rõ ràng những gì sẽ thay thế nó. Tôi đoán nó phụ thuộc vào những gì W3C đi lên với cho theming DOM bóng (như https://tabatkins.github.io/specs/css-shadow-parts/)

::ng-deep cũng được hỗ trợ trong Sass (hoặc sẽ được, tùy thuộc vào việc thực hiện Sass)

gốc

Xem đóng gói giúp ngăn chặn các kiểu chảy máu vào hoặc ra khỏi các thành phần. Việc đóng gói mặc định là ViewEncapsulation.Emulated trong đó các lớp như _ngcontent-mav-x được thêm vào thẻ thành phần và các kiểu cũng được viết lại để chỉ áp dụng cho các lớp phù hợp.

Điều này mô phỏng ở một mức độ nào đó là hành vi mặc định của DOM bóng.

Bạn có thể tắt tính năng đóng gói này thêm encapsulation: ViewEncapsulation.None vào trang trí @Component().

Một cách khác là các bộ phối hợp CSS xuyên bóng được giới thiệu gần đây (lại) được giới thiệu >>>, /deep/ và ::shadow. Các combinators này đã được giới thiệu để tạo kiểu dáng cho bóng DOM nhưng không được chấp nhận ở đó. Angular giới thiệu chúng gần đây cho đến khi các cơ chế khác như các biến CSS được thực thi. Xem thêm https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> và /deep/ là tương đương và sử dụng combinators này làm cho phong cách bỏ qua các lớp helper thêm (_ngcontent-mav-x)

* >>> my-component, /* same as */ 
* /deep/ my-component { 
    background-color: blue; 
} 

áp dụng cho tất cả các my-component thẻ không quan trọng họ là làm thế nào sâu lồng trong các thành phần khác.

some-component::shadow * { 
    background-color: green; 
} 

áp dụng cho tất cả các phần tử trong mẫu some-component, nhưng không phải là hậu duệ nữa.

Họ cũng có thể được kết hợp

* /deep/ my-component::shadow div { 
    background-color: blue; 
} 

này áp dụng cho tất cả các phần tử div trong mẫu của tất cả my-component mẫu bất kể có bao sâu my-component được lồng trong các thành phần khác.

/deep/, >>>, và ::shadow chỉ có thể được sử dụng với

• encapsulation: ViewEncapsulation.None
• encapsulation: ViewEncapsulation.Emulated
• encapsulation: ViewEncapsulation.Native khi trình duyệt hỗ trợ họ natively (với Chrome nhưng in một cảnh báo trong giao diện điều khiển rằng họ đang bị phản đối) hoặc
  khi trình duyệt không hỗ trợ bóng DOM gốc và các polyfills của web_components web_components được tải.

Đối với một ví dụ đơn giản cũng là Plunker nhìn thấy từ câu hỏi này https://stackoverflow.com/a/36226061/217408

Xem thêm bài trình bày này từ ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

Answer 2

Bạn nên cố gắng này,

import {ViewEncapsulation} from 'angular2/core'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    ... 

    })