Angular2 부모 구성 요소에서 click 이벤트를 사용하여 자식 구성 요소의 클래스를 전환하십시오.

Question

클릭 이벤트를 사용하여 클래스를 설정/해제하려고 할 때, 실행중인 문제는 클래스를 생성하는 동안 부모 구성 요소에 클릭 이벤트가있는 것입니다. 하위 구성 요소에 있습니다. 나는 @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

를 전환 드릴 수 없습니다 ] "to

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