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 方法将在更改检测时被调用，即使您不重新加载，它也应该更新您的样式(因为，正如您所说，您永远不必重新加载) .