Angular2親コンポーネントのclickイベントを使用する子コンポーネントのToggleクラス

Question

clickイベントを使用してクラスのオン/オフを切り替えようとしていますが、私が実行している問題は、クリックイベントがクラスの間子コンポーネントにあります。私は@Input（）デコレータを使用してクラスと子を初期化することが可能ですが、私はクラスあなたが[class.scrollビュー] = "[isClassVisibleから括弧を削除する必要があり、その後

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-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]}}" >