Hướng dẫn how to use scss variable in angular html - cách sử dụng biến scss trong html góc cạnh

Tôi đã thực hiện nghiên cứu nếu có thể sử dụng giá trị biến SCSS trong HTML hoặc TS trong góc.

Ví dụ

Tôi có một biến gọi là

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

Trong html tôi có một điều kiện

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

992 là giá trị giống như

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

Câu hỏi của tôi là có thể tham khảo điều kiện

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

Tôi đang sử dụng Angular 8

Hỏi ngày 16 tháng 10 năm 2019 lúc 13:28Oct 16, 2019 at 13:28

San Jaisysan JaisySan Jaisy

13,5K29 Huy hiệu vàng140 Huy hiệu bạc244 Huy hiệu đồng29 gold badges140 silver badges244 bronze badges

1

Bạn có thể tạo một biến chứa giá trị là

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

TypeScript:

mdBreakpoint = 992;

HTML:

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

UPDATE:

Có vẻ như không có cách nào để truy cập SASS bây giờ, nhưng nếu bạn muốn có một thứ giống như biến toàn cầu, thì bạn có thể tạo biến của mình trong tệp

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

export const environment = {
  production: false,
  MD_BREAKPOINT: 992 
};

Và trong thành phần của bạn:

export class YourComponent {  
  title = 'myapp works!';
  mdBreakpoint = environment.MD_BREAKPOINT;
}

Đã trả lời ngày 16 tháng 10 năm 2019 lúc 13:37Oct 16, 2019 at 13:37

StepupSpupStepUp

34.3K14 Huy hiệu vàng83 Huy hiệu bạc142 Huy hiệu đồng14 gold badges83 silver badges142 bronze badges

3

SASS - viết tắt cho các bảng phong cách tuyệt vời về mặt cú pháp - là một trình biên dịch CSS đơn giản hóa các CSS viết. Nó là một lựa chọn phổ biến trong số các nhà phát triển góc cạnh bởi vì, bên cạnh việc giảm đáng kể lượng dự phòng trong các quy tắc CSS, SASS còn được CLI Angular hỗ trợ. Trên thực tế, nó là một trong những lựa chọn của bạn bất cứ khi nào bạn tạo một dự án mới:

Trong các kiểu CSS ràng buộc với các sự kiện trong hướng dẫn ứng dụng góc, chúng tôi đã học cách đặt các biến Vanilla CSS bằng phương thức setProperty (). Bạn có thể nghĩ về bài viết hôm nay như một loại đồng hành trong đó nó sẽ bao gồm cách đọc các biến và sử dụng chúng trong các ứng dụng góc của bạn. Để làm điều đó, chúng tôi sẽ sửa đổi ứng dụng demo mà chúng tôi đã xây dựng trong hướng dẫn đó để tìm nạp các màu chủ đề được xác định trong tệp SASS .SCSS.setProperty() method. You can think of today’s article as a sort of companion piece in that it will cover how to read variables and use them in your Angular applications. To do that, we’ll modify the demo app that we built in that tutorial to fetch theme colors that are defined in a Sass .scss file.

Tại sao sử dụng các biến SASS?

SASS cung cấp nhiều mô-đun tích hợp cung cấp các chức năng hữu ích. Ví dụ, mô -đun màu chứa nhiều chức năng hữu ích cho cả phân tích và sửa đổi màu sắc. Chúng bao gồm các hàm Lighten () và Darken (), có màu và thay đổi nó theo tỷ lệ phần trăm. Chúng đặc biệt hữu ích để điều chỉnh một loạt các màu chủ đề một cách nhất quán. Dưới đây là một số biến SASS lưu trữ kết quả của các hàm Lighten () và Darken ():lighten() and darken() functions, which take a color and alter it by a percentage. These are especially useful for adjusting a wide range of theme colors in a consistent way. Here are some Sass variables that store the results of the lighten() and darken() functions:

$backgroundColor: rgb(82, 172, 240);
$lightBackgroundCcolor: lighten($backgroundColor, 16%);
$hoverColor: blue;
$darkHoverColor: darken($hoverColor, 20%);
$focusBorderColor: darkgray;
$darkFocusBorderColor: darken($focusBorderColor, 40%);

Chúng có thể được áp dụng trực tiếp cho các yếu tố trang trực tiếp thông qua các quy tắc CSS. Tuy nhiên, có những lúc không thể xảy ra, chẳng hạn như khi một thành phần góc chấp nhận màu sắc là tham số @Input, như được sử dụng trong hướng dẫn về phạm vi biến CSS trong bản demo góc:@Input parameters, as employed in the Guide to CSS Variable Scoping in Angular Demo :

<feed-component 
  [background-color]="backgroundColorInput"
  [hover-background-color]="hoverColorInput"
  [focus-border-color]="focusBorderColorInput"
>
</feed-component>

Bạn có thể cố gắng gần đúng hiệu quả của các hàm SASS trong TypeScript, nhưng kết quả của bạn sẽ khác nhau về tính nhất quán và gần như chắc chắn đã thắng được khớp với các hàm SASS. Do đó, giải pháp lý tưởng là đọc trong các màu SASS và cung cấp chúng cho các thành phần cần chúng.

Đọc: Giới thiệu về TypeScript và các tính năng của nó Introduction to TypeScript and Its Features

Đọc các biến CSS từ dịch vụ

Bước đầu tiên trong việc đọc các biến SASS mà chúng tôi đã khai báo ở trên là lưu trữ chúng trong các biến CSS tiêu chuẩn. Để làm điều đó, các giá trị thuộc tính phải được viết trong phép nội suy:

.color-demo-app {
  --background-color: #{$backgroundColor};
  --light-background-color: #{$lightBackgroundCcolor};
  --hover-color: #{$hoverColor};
  --dark-hover-color: #{$darkHoverColor};
  --focus-border-color: #{$focusBorderColor};
  --dark-focus-border-color: #{$darkFocusBorderColor};
}

Nó cũng là một ý tưởng tốt để giới hạn phạm vi biến thành thẻ bên ngoài của các ứng dụng của bạn để không đổ vào nội dung xung quanh, nếu ứng dụng của bạn là một phần của trang lớn hơn:

<div class='wrapper color-demo-app'>
  application content
</div>

Colorservice của chúng tôi sẽ có một phương thức công khai có tên LoadColors (). Nó sẽ chấp nhận một loạt các màu để tải, cùng với một bản đồ để liên kết các màu được tải với tên của chúng. Phương thức tài liệu GetElementsByByClassName () sẽ nhận được phần tử ‘Color-Demo-app. Sau đó, nó được chuyển sang window.getComputedStyle () để truy xuất tất cả các kiểu phần tử. Nó trả về một cssstyledeclaring cung cấp phương thức getPropertyValue (). Sử dụng nó để tìm nạp từng giá trị biến màu, sau đó chúng ta có thể thêm cả thuộc tính và giá trị màu vào colormap:ColorService will have expose a public method named loadColors(). It will accept an array of colors to load, along with a Map in which to associate the loaded colors with their names. The document’s getElementsByClassName() method will get the ‘color-demo-app’ element. It then gets passed on to window.getComputedStyle() to retrieve all element styles. It returns a CSSStyleDeclaration that provides the getPropertyValue() method. Using it to fetch each color variable’s value, we can then add both color property and value to the colorMap:

import { Injectable } from '@angular/core';

@Injectable()
export class ColorService {
  public loadColors(colors: string[], colorMap: Map<string, string>) {
    // Read the custom property of body section with given name:
    const appElement = document.getElementsByClassName('color-demo-app');
    if (appElement && appElement.length > 0) {
      const appStyles = window.getComputedStyle(appElement[0]);
      colors.forEach((el) => {
        colorMap.set(
          el, 
          appStyles.getPropertyValue(el).replace(' ', '')
        );
      });
    }
  }
}

Sử dụng Colorservice

Trong ứng dụng, tất cả những gì chúng ta cần làm bây giờ là gọi dịch vụ của chúng tôi để lấy hàng! Tôi đã đưa ra ý tưởng phân chia tên màu thành các hiệu ứng màu sắc và chức năng để thực thi các quy ước đặt tên:AppComponent, all we need to do now is call our service to get the goods! I came up with the idea to divide color names into the colors and function effects in order to enforce naming conventions:

const CSS_PREFIX = "--";
const CSS_SUFFIX = "color";

enum PropertyNames {
  background  = 'background',
  hover       = 'hover',
  focusborder = 'focus-border'
}

enum ColorOptions {
  standard = '',
  light    = 'light',
  dark     = 'dark'
} 

const COLOR_LIST = [
  `${CSS_PREFIX}${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.light}-${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.focusborder}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.focusborder}-${CSS_SUFFIX}`
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ColorService]
})
export class AppComponent implements OnInit {
  // Expose enums to the template
  public PropertyNames = PropertyNames;
  public ColorOptions = ColorOptions;

  private _colorMap: Map<string, string>

  constructor(private colorService: ColorService) { }
   
}

Một vài điều cần lưu ý về mã trên:

• Colorservice được khai báo trong mảng nhà cung cấp.ColorService is declared in the providers array.
• Sau đó, nó được tiêm vào thành phần như một đối số của hàm tạo. Điều đó sẽ cho phép chúng tôi tham khảo nó sau.

Trong Oninit, chúng tôi sẽ khởi tạo biến _colormap mà chúng tôi đã tạo ở trên và chuyển nó sang phương thức Colorservice LoadColors (), cùng với color_list.OnInit, we’ll instantiate the _colorMap variable that we created above and pass it to the colorService’s loadColors() method, along with the COLOR_LIST.

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

Không có gì được trả về từ loadcolors () bởi vì, như một đối tượng, colormap được truyền bằng tham chiếu. Do đó, nó giữ lại dữ liệu của nó ngay cả sau khi chức năng đã chấm dứt. Nếu chúng ta làm một bảng điều khiển.log () trên colormap sau khi gọi loadColors (), chúng ta sẽ thấy rằng sáu màu của chúng ta đã được đọc: loadColors() because, as an object, the colorMap is passed by reference. Hence, it retains its data even after the function has terminated. If we were do do a console.log() on the colorMap after invoking loadColors(), we would see that our six colors have all been read:

Kết luận Dịch vụ góc và đọc các biến SASS

Có nhiều cách đọc khác trong các biến SASS từ các ứng dụng góc, nhưng đây là phương pháp chúng tôi sử dụng trong công việc hàng ngày của tôi. Có một bản demo với mã ngày hôm nay trên Stackblitz. Trên thực tế, bạn sẽ thấy rằng nó chứa nhiều mã hơn chúng tôi đã đề cập ở đây hôm nay. Chúng tôi sẽ nói về nó trong bài viết tiếp theo.

Robert Gravelle

Rob Gravelle cư trú tại Ottawa, Canada và là một bậc thầy CNTT trong hơn 20 năm. Vào thời điểm đó, Rob đã xây dựng các hệ thống cho các tổ chức liên quan đến tình báo như Dịch vụ Biên phòng Canada và các doanh nghiệp thương mại khác nhau. Trong thời gian rảnh rỗi, Rob đã trở thành một nghệ sĩ âm nhạc thành đạt với một số bản phát hành đĩa CD và kỹ thuật số cho tín dụng của mình.

Chúng ta có thể sử dụng các biến SCSS trong HTML không?

Làm cách nào để sử dụng các biến trong SCSS góc?

Tôi có thể sử dụng SCSS trong góc không?

SCSS trong HTML là gì?