Tự động tải CSS

người hướng dẫn. [00. 00] Ở đây tôi có một dự án mới được tạo bằng Angular CLI. Đây là những gì bạn thường nhận được khi khởi động nó lần đầu tiên. Những gì chúng tôi muốn làm là tạo kiểu động cho ứng dụng của chúng tôi dựa trên ứng dụng khách đăng nhập

[00. 14] Trước hết, hãy xem thành phần ứng dụng của chúng ta ở đây. Điều tôi muốn làm ở đây là, trước hết, xóa toàn bộ phần liên kết bên dưới, để có cái nhìn rõ ràng hơn một chút và thêm vào đây một lớp, AppTitle. Nếu bạn muốn tạo kiểu cho AppTitle này, bạn có các tùy chọn khác nhau

[00. 30] Tất nhiên, bạn có thể truy cập vào tệp AppComponent SAS đó hoặc bạn có thể truy cập tệp chung và thêm quy tắc vào đây. Hãy nói ở đây, người gọi. đen. Trong trường hợp này, nó sẽ không thay đổi nhiều. Nếu tôi thay đổi nó thành màu đỏ, bạn có thể xem cách nó được áp dụng cho chủ đề của chúng tôi tại đây

[00. 46] Tất cả đều hay và đẹp, nhưng nếu bạn muốn có các loại chủ đề khác nhau thì sao? . Nếu tôi sao chép cái này ở đây, tôi muốn có kiểu máy khách A và một kiểu khác sẽ là kiểu máy khách B. Tương tự, đối với Khách hàng A, tôi đang nói với nó rằng màu phải là màu đỏ. Đối với Khách hàng B, màu phải là màu xanh lam

[01. 10] Bây giờ, cho đến nay, đây là các tệp SAS độc lập, không thực sự được chạm vào bởi Angler CLI. Chúng ta phải truy cập tệp JSON góc đó tại đây và thay đổi cấu hình. Nếu bạn cuộn xuống một chút, bạn sẽ thấy ở đây dự án của bạn và phần kiến ​​trúc sư, phần xây dựng, các tùy chọn. Trong đó chúng ta có phần phong cách đó. Các bạn có thể xem tại đây các file CSS, CSS, SCSS chính được tham khảo. Chúng tôi cũng có thể tham khảo tương tự của chúng tôi

[01. 36] Những gì chúng ta có thể làm ở đây là nói kiểu Khách hàng A và tương tự, kiểu Khách hàng B. Vì chúng tôi đã thay đổi cấu hình, hãy khởi động lại ứng dụng của chúng tôi. Bạn thấy ứng dụng của chúng tôi làm mới, nhưng những gì xảy ra thực sự không như những gì chúng tôi mong đợi. Tiêu đề hiện đã đổi thành màu xanh lam, đây là màu được chỉ định trong kiểu Khách hàng B

[02. 03] Lý do ở đây là trong số tất cả các tệp SAS này sẽ thực sự được đưa vào tài liệu của chúng tôi, B thực sự đang ghi đè những gì A đã chỉ định và đang ghi đè kiểu đã chỉ định

[02. 13] Để thay đổi điều này, chúng ta thực sự có thể thay đổi ký hiệu này ở đây thành một cú pháp khác, do đó, chỉ cần một cú pháp phức tạp hơn sẽ cung cấp cho chúng ta một số tùy chọn hay. Trước hết, chúng tôi có ở đây một đầu vào. Đầu vào sẽ thực sự là tập tin của chúng tôi. Sau đó, chúng tôi cũng muốn đặt cho nó một tên gói, vì nó không còn được tạo động nữa và chúng tôi không muốn có hàm băm đó ở cuối. Chúng ta sẽ thấy sau tại sao. Tôi đặt tên cho khách hàng này là A. Sau đó, tất nhiên, chúng ta có thể làm tương tự cho Khách hàng B

[02. 46] Phần cuối cùng còn thiếu ở đây là chúng ta cần yêu cầu CLI không đưa phần này vào tệp HTML mặc định. Chúng tôi sử dụng thuộc tính inject false mà chúng tôi thêm rõ ràng vào cả hai phần. Để xem điều này có hoạt động hay không, hãy biên dịch ứng dụng của chúng tôi trong sản xuất. Chúng tôi sử dụng ng build --prod

[03. 08] Nếu bạn truy cập thư mục bản dựng của chúng tôi ngay bây giờ -- hãy chuyển tới thư mục đĩa, DynCSS -- bây giờ bạn có thể thấy rằng chúng tôi nhận được tệp CSS Máy khách A với CSS chính xác của chúng tôi trong đó, Máy khách B. Bạn cũng có thể thấy các kiểu mặc định cũng có hàm băm được thêm vào nó. Hai cái này hoàn toàn phù hợp để được thêm vào thời gian chạy ứng dụng của chúng ta, đây là bước tiếp theo chúng ta sẽ xem xét

[03. 31] Để tải CSS động trong thời gian chạy, hãy quay lại thành phần ứng dụng của chúng ta. Những gì bạn sẽ làm ở đây là, chúng tôi sẽ thêm một số nút. Ở đây "Tải chủ đề cho ứng dụng khách" và bây giờ chúng tôi thêm vào đây một trình xử lý nhấp chuột có nội dung "Tải chủ đề. "

[03. 50] Chúng tôi phân tích cú pháp và đó sẽ là "Khách hàng A. CSS" và tương tự, tất nhiên, đối với Khách hàng B. Tất nhiên chúng ta cũng phải định nghĩa hàm này. Hãy chuyển đến tệp TS đó, vào thành phần ứng dụng của chúng tôi. Hãy thêm vào đây Tải chủ đề. Ở đây, chúng ta sẽ nhận được một tệp CSS là một chuỗi. Bên trong đây, chúng ta cần tải động nó. Thông thường, những gì chúng tôi có ở đây là phần đầu của chúng tôi

[04. 17] Bên trong đây, bạn có một liên kết rel="stylesheet". Nó có thể, gõ = "văn bản/CSS". Sau đó, chúng tôi sẽ có href sẽ trỏ đến tệp CSS của chúng tôi. Chẳng hạn, khách hàng A. CSS. Đây chính xác là những gì bạn sẽ làm bây giờ một cách linh hoạt

[04. 35] Để thêm nội dung nào đó vào phần đầu, chúng ta cần truy cập vào đối tượng tài liệu. Chúng tôi thực sự có thể tham khảo trực tiếp điều đó trên toàn cầu, vì vậy chúng tôi viết "tài liệu. " và như thế. Nhưng chúng tôi muốn làm cho nó gọn gàng hơn một chút, nếu bạn muốn, bằng cách nhập mã thông báo tương ứng từ góc/chung

[04. 55] Ở đây chúng tôi nhận được mã thông báo tài liệu. Bây giờ, chúng ta thực sự có thể đưa nó vào hàm tạo của mình. Ví dụ, điều đó cho phép chúng tôi mô phỏng điều đó trong quá trình thử nghiệm. Chúng tôi sử dụng tài liệu mã thông báo tiêm. Chúng tôi thực sự có thể sử dụng nó dưới đây

[05. 11] Điều đầu tiên bạn muốn làm là lấy một ví dụ ở đây từ phần đầu đó. Giả sử headElement= this. tài liệu. getElementsByTagName('đầu'). Có khả năng, getElementByTagName đó trả về nhiều phần tử. Đó là một mảng nhưng thường chỉ có một phần tử đầu trong tệp HTML của chúng tôi. Chúng tôi có thể xem nếu bạn lấy cái đầu tiên ở đây từ mảng đó

[05. 37] Bước tiếp theo của chúng tôi là tạo một phần liên kết như vậy. Chúng tôi nói const newLinkEl = this. tài liệu. tạo phần tử. Đây là loại liên kết. Bây giờ chúng tôi thêm một loại tài sản khác. Chúng tôi thêm vào đây rel = 'stylesheet,' newLinkEl. href. Ở đây chúng ta có thể trực tiếp thêm vào đây tệp CSS đó

[06. 09] Cuối cùng, chúng ta cần thêm nó vào phần tử đầu đó. Chúng ta có thể nói appendChild vào newLinkEl đó. Hãy lưu cái này. Hãy làm mới ứng dụng của bạn. Chúng ta thấy hai nút. Nếu tôi nhấp vào nút, chúng tôi sẽ gặp lỗi. Có vẻ như khách hàng A. tệp css không có

[06. 29] Vấn đề ở đây là trong quá trình phát triển, nếu bạn vào bảng điều khiển mạng đó và chúng tôi làm mới, bạn sẽ thấy chúng tôi nhận được một kiểu. tập tin js. Tất cả các phong cách của chúng tôi sẽ được nhúng bên trong đây. Do đó, không thể tự động tìm nạp chúng khi chạy

[06. 44] Những gì chúng ta có thể làm là đi đến góc đó. json và có một thuộc tính gọi là extractCss. Tôi sẽ đặt điều đó thành sự thật. Một lần nữa, chúng ta cần khởi động lại ứng dụng của mình. Khi ứng dụng khởi động, bạn có thể thấy tệp kiểu đã biến mất. Nếu bạn truy cập CSS, bây giờ chúng ta sẽ thấy chúng ta có các kiểu. tập tin css, thực sự

[07. 11] Nếu tôi nhấp vào đây, bạn cũng có thể thấy rằng Khách hàng A được đưa vào đây khi tôi nhấp vào chủ đề Khách hàng A. Bạn cũng có thể thấy rằng cái này đã đổi thành màu đỏ. Bây giờ chúng tôi đã tự động thêm một chủ đề trong thời gian chạy mà trình duyệt rõ ràng sẽ hiểu ngay lập tức. Chúng tôi thấy hiệu ứng ở đây, có phông chữ đó ở đây màu đỏ

[07. 29] Chúng tôi có thể tối ưu hóa một chút tập lệnh đó hoặc phần đó mà chúng tôi không muốn nối thêm mỗi khi nhấp qua lại vào nút đó, nhưng chỉ khi chúng tôi chưa có nó. Những gì chúng tôi muốn làm ở đây là thêm một id. Gọi nó là "client-theme. "Đó là điều chúng ta sẽ làm ở đây

[07. 49] Trước khi thực sự thêm nó, chúng ta có thể thử tham khảo. Chúng tôi sử dụng getElementById, client-theme. Nếu phần tử hiện có ở đây hiện diện, chúng tôi thực sự muốn đặt href thành phần tử mới. Ở đây, TypeScript phàn nàn vì đây là một phần tử HTML. Chúng tôi cần chuyển nó thành phần tử liên kết HTML để TypeScript cũng sẽ ổn

[08. 21] Nếu điều đó tồn tại, chúng tôi chỉ đặt href và tất nhiên, chúng tôi sẽ làm những gì chúng tôi đã làm trước đây. Chúng tôi thêm thẻ liên kết hoàn toàn mới đó vào phần đầu của chúng tôi. Một lần nữa, hãy thử cách nó hoạt động. Nếu chúng tôi sử dụng Khách hàng B, chúng tôi sẽ nhận được màu xanh lam. Nếu chúng tôi sử dụng Khách hàng A, chúng tôi sẽ nhận được màu đỏ

Làm cách nào để tải tệp CSS trong JavaScript?

Làm cách nào để thêm tệp CSS động trong Angular?

Làm cách nào để tải HTML động bằng JavaScript?

Làm cách nào để tải JS trước CSS?