Angular2: Cách tốt nhất để chuyển kiểu cho một thành phần là gì?

Question

Vì vậy, tôi có thành phần này được gọi là InputEdit (về cơ bản là một Nhãn có thể được chỉnh sửa khi bạn nhấp vào nó ... đủ đơn giản) và thành phần này có kiểu dáng CSS dom riêng. Nhưng tất nhiên mỗi thành phần lưu trữ sẽ muốn đặt kích thước phông chữ và màu sắc riêng cho thành phần đầu vào ...

vì vậy, cách tốt nhất là gì? Bạn có thể vượt qua trong lớp tạo kiểu và áp dụng toàn bộ CSS cho thành phần không? hoặc sẽ tốt hơn khi chuyển từng giá trị theo cách thủ công như sau:

 <InputEdit [color]="'red'"/> 

có vẻ như rất nhiều công việc ... nhưng một lần nữa vì chúng tôi đang sử dụng bóng hoặc giả lập, chúng tôi không thể kiểm soát CSS bên ngoài ...

tôi cũng lưu ý rằng bạn có thể ghép mở bóng và nhắm mục tiêu các yếu tố trực tiếp qua:

/* styles.css */ 
UserInfo /deep/ InputEdit label { 
    color: red; 
    font-size: 1.1em; 
} 

mà về cơ bản sẽ cho phép bạn tham gia vào một thành phần tùy chỉnh tên UserInfo/sâu (bất kỳ cấp độ)/thành phần tùy chỉnh InputEdit và nhãn mục tiêu có màu đỏ ...

nhưng một lần nữa, tôi tự hỏi phương pháp tốt nhất dành riêng cho ng2 ... như chuyển cấu hình lớp thành chỉ thị là gì?

Cảm ơn,

Sean

Answer 1

tôi sẽ chỉ cần sử dụng một tài sản đầu vào styles trên InputEdit, và vượt qua trong một đối tượng với phong cách mong muốn:

<InputEdit [styles]="stylesObj">     // in host component's template 

stylesObj = {font-size: '1.1em', color: 'red'}; // in host component class 

<input [ngStyle]="stylesObj" ...>    // in InputEdit component's template 

Nếu bạn có nhiều yếu tố DOM bạn muốn tạo kiểu, chuyển vào một đối tượng phức tạp hơn:

<InputEdit [styles]="stylesObj"> 

stylesObj = { 
    input: {font-size: '1.1em', color: 'red'} 
    label: { ... } 
}; 

<label [ngStyle]="styles.label" ...> 
<input [ngStyle]="styles.input" ...> 

Answer 2

/deep/, ::shadow và >>> không còn được dùng nữa.

việc không dùng chỉ dành cho việc thực hiện nguồn gốc trong Chrome (trình duyệt khác không bao giờ thực hiện nó) nhưng góc có thi đua riêng của mình những combinators CSS trong ViewEncapsulation.Emulated (mặc định)

/deep/, ::shadow và >>> do đó có thể được sử dụng tốt trong Angular2.

Trong hơn các lớp học đơn giản hoặc các thiết lập sở hữu phong cách sử dụng ngStyleAngular 2.0 and ng-style

Answer 3

Mark Rajcok's Câu trả lời là tốt cho một nhóm các phong cách, nhưng nếu bạn chỉ đi để cho phép các font-size và màu sắc phải được thay đổi, bạn thể muốn sử dụng một cách tiếp cận trực tiếp hơn như bạn bắt đầu với (trong ví dụ này, cũng thực thi chỉ pixel thay vì một chuỗi linh hoạt hơn cho các mục đích trình diễn):

cHO TÍNH STYLE CÁ NHÂN:

Component:
012.351.<InputEdit [color]="'red'" [fontSize]="16">

thành phần.ts:
Input() color: string = 'black';
Input() fontSize: number = 18;

component.template:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

---

NẾU CHO PHÉP một nhóm các phong cách:

Component:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> LƯU Ý: Hãy chắc chắn rằng các thuộc tính CSS là camelCased hoặc trong chuỗi nếu có nhiều hơn một từ.

component.ts:
@Input() styles: any = {};

component.template:
<input type="text" [ngStyle]="styles">