html - 动态更改 css 而无需在 Angular2 中重新加载页面

Question

我有一个侧面导航栏，其中每个导航栏都有进度条。这是模块化结构-

MainFile
   -Children1
       -children1.html
       -children1.component.ts
  -Children2
       -children2.html
       -children2.component.ts
  -Children3
       -children3.html
       -children3.component.ts
  -ProgressIndicator
       -progressIndicator.html
       -progressIndicator.component.ts
  -main.html
  -main.component.ts

在 progressIndicator.html 里面，我有这段代码，

 <div class="progress">
    <div [ngStyle]="{'width':getProgress()}" class="progress-bar" role="progressbar" aria-
       valuenow="70" aria-valuemin="0" aria-valuemax="100">
       <span class="sr-only">70% Complete</span>
   </div>

还有我的 progressIndicator.component.ts

currentPage = '';
progressBar = '';
//getting current route name using 'this.route.url' and updating 'currentPage' property in 
constructor.
getProgress(){
   if(currentPage  === 'children1'){
         return progressBar = '25%';
     }
   if(currentPage  === 'children2'){
        return progressBar = '50%';
    }
}

我成功获取了当前页面，如“children1.html”或“c​​hildren2.html”，基于当前页面我想用类“progress-bar”更改 div 的宽度，我使用了

[ngStyle]="{width:getProgress()}"

但它只有在页面重新加载时才会生效，而 angular2 是 SPA 不会发生。请帮助我找到一种更好的方法，当我从“children1”移动到“children2”时，“getProgress()”会生效并更改样式。

Answer 1

您应该从方法中返回整个样式对象:

组件

getStyle():any{
    return { width: getProgress() };
}

模板:

[ngStyle]="getStyle()";

这样，整个 getStyle 方法将在更改检测时被调用，即使您不重新加载它也应该更新您的样式(因为，正如您所说，您永远不必重新加载) .