Tạo css động dựa trên biến angular 4

Question

Tôi đang làm việc trên bảng quản trị được phát triển với góc 4 và cố gắng tích hợp một phần để tùy chỉnh kiểu dáng như thay đổi màu, bg, v.v. Tôi đã phát triển một phần để lưu cài đặt trong cơ sở dữ liệu đã tải chúng lên ứng dụng khi sử dụng API.

Bây giờ tôi đang cố gắng để tạo ra một css động sử dụng các giá trị từ json, tôi đã cố gắng với mã sau đây trong thành phần chính nhưng nó không làm việc

@Component({ 
     templateUrl: 'card.html', 
     styles: [` 
     .card { 
      height: 70px; 
      width: 100px; 
      color: {{css.cardColor}}; 
     } 
     `], 
}) 

Tôi không chắc chắn làm thế nào tôi nên tải các giá trị css trong thành phần và sử dụng chúng trong thẻ kiểu. Tôi đã không tìm thấy bất kỳ giải pháp khác cho cùng.

Một cách khác là sử dụng khái niệm hoạt hình góc nhưng css sẽ rất lớn và không thể thực hiện toàn bộ bằng hoạt ảnh góc sử dụng trình kích hoạt và tất cả. Tôi tin rằng có một giải pháp cho điều này vì nó có vẻ là một yêu cầu chính hãng và nên được thực hiện bởi rất nhiều nhà phát triển khác.

Mọi trợ giúp đều đáng được đánh giá cao.

Chỉnh sửa: không thể sử dụng ngStyle vì nó sẽ được áp dụng trên hầu như tất cả các yếu tố như cho toàn bộ ứng dụng và không chỉ cho phần tử cụ thể.

Answer 1

Sau khi đi qua các phương pháp khác nhau và tiếp cận thêm css động để tất cả các trang trên ứng dụng góc tôi đã kết thúc với các giải pháp sau đây.

Yêu cầu: tạo css động dựa trên các giá trị được trả lại từ và API để thay đổi thiết kế và kiểu dáng.

Giải pháp:

1. tạo ra một thành phần mới và tạo ra một dịch vụ tải biến css động từ API.
2. Thêm thẻ kiểu trong tệp mẫu và sử dụng các giá trị biến cho thuộc tính.
3. Tải mẫu này trên tất cả các trang hoặc trên mẫu chính.
4. Trên kiểu xây dựng ứng dụng sẽ được chuyển sang thẻ đầu.

mẫu Mã

import { CssService} from './Css.service'; 

@Component({ 
    selector: 'DynamicCss', 
    templateUrl: './DynamicCss.component.html', 
    styleUrls: ['./DynamicCss.component.scss'] 
}) 
export class ServiceProviderComponent implements OnInit { 
    cssVariables: any; 
    constructor(private cssService:CssService){ 
     /* call the service/api to get the css variable values in cssVariables */ 

    } 
} 

mẫu

<style> 
.css_class{ 
    background: {{cssVariables.bgcolor}}; 
    color: {{cssVariables.fontcolor}}; 
} 
</style> 

Answer 2

bạn có thể sử dụng ngStyle để nhuộm thêm css vào trang của bạn từ json.

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div> 

Một ví dụ khác về tương tự có thể được

<div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover' }"></div> 

đây tôi đã tải hình nền từ json

Answer 3

ngClass là sử dụng để thiết lập cơ sở lớp học năng động của giá trị biến của bạn như sau

Ts File Component 
    @Component ({ 
      selector:'simple-comp', 
      template:` <ol class="breadcrumb"> 
     <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li> 
     <li *ngClass="{'active': step==='step2'}" (click)="step='step2'">Step2</li> 
     <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li> 
     </ol>` 
     }) 
    export class SimpleComponent { 
    public step: string = 'step1'; // change value like step1, step2, step3 
    } 

Tham khảo góc cạnh.io: https://angular.io/api/common/NgClass

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> 

Answer 4

Bạn chỉ có thể ràng buộc "style.color"

<div class="card" [style.color]=cardColor>lorem ipsum</div>