각도 2 - 이온 2의 SASS mixin에 동적으로 값을 할당

Question

나는 진행 바에 scss를 구현하는 믹스 인을 가지고 있습니다.

@mixin progressBarMix($name, $size, $perc, $color, $colorBack) { 
    .progressBarWrapper { 
    &#{$name} { 
     $sizeFill: $size/100 * $perc; 

     .progressBarEndFilled { 
     background-color: rgba($color, 1); 
     left: $sizeFill; 
     } 

     .progressBarEnd { 
     background-color: $colorBack; 
     } 
    } 
    } 
} 

@include progressBarMix('.progressBar', 232px, 66, $bar, $barBackground); 

나는 코드에서 '66'진행을 나타내고 내 컨트롤러를 형성 변수에 바인딩 할 위치이 동적으로 포함 할 수 있어야합니다. 이것은 가능한가?

감사

Answer 1

그래서, 문제의 비트가 동적으로 말대꾸 믹스 인을 업데이트하려고에있다 - 말대꾸가 이전 브라우저 렌더링 미리 컴파일 된 무언가이다. 따라서 동적 변수를 전달할 수 있더라도 컴파일하거나 페이지를 새로 고침 (또는 Gulp를 로컬로 실행하는 경우 주입)해야만 스타일 업데이트가 표시됩니다.

그러나이 해결 방법은 여전히 ​​쉽고 Angular 2 코드에 연결될 수 있습니다.

이와 같은 경우 인라인 스타일을 사용해도됩니다. 이것은 부트 스트랩 (Bootstrap)조차도 (example), 매우 일반적인 프론트 엔드 프레임 워크입니다. 여기 link to an example은 Angular 2가 HTML 템플릿을 통해 동적으로 스타일을 변경하는 데 사용되는 것을 볼 수 있습니다.