Angular2 Toggle Класс в дочернем компоненте с помощью события click в родительском компоненте

Question

Я пытаюсь включить или отключить класс с помощью события click, проблема, с которой я сталкиваюсь, заключается в том, что мое событие click находится в родительском компоненте, а класс находится в дочернем компоненте. Я могу инициализировать ребенок с классом, используя @Input() декоратор, но я не могу переключить класс после

import { Component, AfterViewInit, Input, OnInit } from '@angular/core'; 
import { SidebarComponent } from './components/sidebar/sidebar.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'body', 
    host: { 
     '[class.navMdClass]' : 'navMdClass', 
     '[class]' : 'classNames' 
    }, 
    templateUrl:'app.component.html' , 
    directives:[SidebarComponent],  
}) 
export class AppComponent implements OnInit { 
    private isClassVisible:boolean; 
    constructor() {  

    } 
    ngOnInit() { 
     this.isClassVisible=true; 
    } 
    toggleClass() { 
     this.isClassVisible = !this.isClassVisible;  
    } 
} 
//Child component 
import { Component, Input, EventEmitter, OnInit,SimpleChange } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'sidebar', 
    templateUrl:'sidebar.component.html' 
}) 

export class SidebarComponent implements OnInit{ 
    @Input() isClassVisible:boolean; 

ngOnInit() { } 
} 
//Parent click event triggers toggleClass 
<div class="nav toggle"> 
      <a (click)="toggleClass();" href="#" id="menu_toggle"><i class="fa fa-bars"></i></a> 
     </div> 
//Child div where target class is 
<div class="left_col" [class.scroll-view]="[isClassVisible]" > 

Answer 1

вам нужно удалить скобки из [class.scroll-зрения] = "[isClassVisible ] "до

[class.scroll-view]="isClassVisible" 

Answer 2

Я нашел решение проблемы, решение которой включает передачу имен классов в качестве свойств дочернего компонента. Если у вас есть несколько классов для передачи в разные места, вы можете передать свойство массива и вывести его в соответствующие области.

//parent component 
import { Component, AfterViewInit, Input, OnInit } from '@angular/core'; 
import { SidebarComponent } from './components/sidebar/sidebar.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'body', 
    host: { 
     '[class.navMdClass]' : 'navMdClass', 
     '[class]' : 'classNames[0]' 
    }, 
    templateUrl:'app.component.html' , 
    directives:[SidebarComponent] 


}) 
export class AppComponent{ 

    navMdClass:boolean; 
    classNames:Array<any>; 

    constructor() { 
     this.navMdClass=false; 

     this.classNames = ['nav-md', 'scroll-view', 'sidebar-footer']; 
    } 

    toggleClass() { 

     this.navMdClass = !this.navMdClass; 
     if(this.navMdClass==false){ this.classNames[0] = 'nav-md'; this.classNames[1]="scroll-view"; this.classNames[2]="sidebar-footer"} 
     if(this.navMdClass==true){ this.classNames[0] = 'nav-sm'; this.classNames[1]=""; this.classNames[2]="sidebar-footer-hide"} 
     //console.log(this.classNames[0]); 
    } 
} 
//child component 
import { Component, Input, EventEmitter, OnInit, SimpleChange, OnChanges } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'sidebar', 
    templateUrl:'sidebar.component.html', 
    properties: ['cls'] 
}) 

export class SidebarComponent{ 
    @Input() classNames:Array<any>; 
} 

//Parent click event triggers toggleClass 
<div class="nav toggle"> 
      <a (click)="toggleClass();" href="#" id="menu_toggle"><i class="fa fa-bars"></i></a> 
     </div> 
//Sidebar selector in parent is where you pass the cls property declared in child component and pass it the classNames array from the parent component 
<sidebar [cls]="classNames"></sidebar> 
//Child div where target class is 
<div class="left_col {{cls[1]}}" > 
<div class="{{cls[2]}}" >