См. Значение переменной SCSS в файле HTML или TS в Angular.

Question

Я проводил исследование, если возможно использовать значение переменной SCSS в HTML или TS в Angular.

Например,

У меня есть переменная с именем $mdBreakpoint: 992px; внутри _variable.scss file

В html у меня есть условие

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

992 совпадает со значением $mdBreakpoint

На мой вопрос можно ли ссылаться на $mdBreakpoint в HTML-состоянии.

Я использую Angular 8

Answer 1

Он не поддерживается напрямую Angular, html или sass. Вы не можете получить доступ к переменным scss в html-шаблоне без написания некоторой логики.

См. Этот ответ, если вам нужна дополнительная информация о том, как это сделать: доступ к значениям SASS ($ colors from variables.scss)в машинописном тексте (Angular2 ionic2)

Answer 2

Вы можете создать переменную, которая содержит значение mdBreakpoint, а затем использовать ее HTML-шаблон:

TypeScript:

mdBreakpoint = 992;

HTML:

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

ОБНОВЛЕНИЕ:

Кажется, что сейчас нет доступа к SASS, но если вы хотите иметь что-то вроде глобальной переменной, вы можете создать свою переменную в файле environment.ts ииспользуйте в любом компоненте:

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

и в вашем компоненте:

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