如何从角2

Question

下面

另一个组件更新的CSS类我的导航栏组件是我的进度栏组件

@Component ({ 
    selector: 'progress-bar', 
    templateUrl: './progress-bar.component.html', 
    styleUrls: ['./progress-bar.component.css'] 
}) 



    export class ProgressBarComponent { 


} 

这是HTML文件

<div class="step-by-step"> 
    <ul class="unstyled clearfix"> 
    <li class="step step-ok"><span>step one</span></li> 
    <li class="step step-ok"><span>step two</span></li> 
    <li class="last-step step-ok"><span>step three</span></li> 
    </ul> 
</div> 

这是怎么了我的应用程序组件像

进口{元器件}从 “@角/芯”;

@Component ({ 
    selector: '', 


    templateUrl: `<navbar-component></navbar-component> 

<progress-bar></progress-bar> 

<router-outlet></router-outlet>` 
    }) 

    export class AppConfigurationComponent { 

    } 

每个页面来被导航到我已经为这些网页组件（三个总）我希望能够设置CSS类进度条的，我通过网页浏览

下面

是进度条的图像

Answer 1

在相应分量

constructor(private router: Router){ 
    if(this.router.url == "/componentName") { 
     $("progress-bar").addClass("home"); // add jquery or do it in angular way.. 
    } 
} 

Answer 2

有尝试此有很多的方式来做到这一点，尝试在ProgressBarComponent

export class ProgressBarComponent implements OnInit { 
 

 
    step = { 
 
    one: true, 
 
    two: false, 
 
    three: false 
 
    } 
 

 
    constructor(private router: Router) { 
 
    } 
 

 
    ngOnInit() { 
 

 
    this.router.events.subscribe(event => { 
 

 
     if (event instanceof NavigationEnd) { 
 

 
      this.setStep(event.path); 
 
     }); 
 
    } 
 
    
 
    setStep(path){ 
 
    
 
    //replace the string with your actual component path 
 
    this.step.two = (path === '/secondPage' || path === '/thirdPage') ? true : false; 
 
    this.step.three = (path === '/thirdPage') ? true : false; 
 
    } 
 
}

<div class="step-by-step"> 
 
    <ul class="unstyled clearfix"> 
 
    <li class="step" [class.step-ok]="step.one"><span>step one</span></li> 
 
    <li class="step" [class.step-ok]="step.two"><span>step two</span></li> 
 
    <li class="last-step" [class.step-ok]="step.three"><span>step three</span></li> 
 
    </ul> 
 
</div>

这应该工作以及这个代码。有（更好的更新从根组件路由器的变化）使用同样的方法this.router.events.subscribe肯定更好的解决方案，我推荐你使用一个应用程序状态像ngrx/store，那么你就可以在任何地方更新这个状态，你进度会按照该缔约国