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'或'children2.html'，基于当前页面，我想用类'progress-bar'更改div的宽度，我用

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

但它仅在页面重新加载时才生效，其中angular2不会发生。帮助我找到一种更好的方法，当我从'children1'移动到'children2'时，'getProgress（）'生效并改变风格。

Answer 1

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

组件

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

模板：

[ngStyle]="getStyle()";

这样，整个getStyle方法将在更改检测时调用，即使您没有重新加载也应该更新您的样式（因为，正如您所说，您永远不必重新加载）。

Answer 2

返回通话中的完整键：值对。还可以将currentPage分配到您的函数中。

HTML

[ngStyle] = "getProgress()"

TS

getProgress(){
   let currentPage = this.router.url;
   let progressBar;
   if(currentPage  === 'children1'){
         progressBar = {'width' : '25%'};
     }
   if(currentPage  === 'children2'){
         progressBar = {'width' : '50%'};
    }
   return progressBar
}

Here是一篇关于ngStyle使用的好文章。

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

2 个答案: