انگولار - تغییر کلاس در کامپوننت فرزند در انگولار2 با استفاده از رویداد کلیک در کامپوننت والد

من تلاش میکنم یک کلاس را با استفاده از یک رویداد کلیک روشن/خاموش کنم، مشکلی که با آن روبرو هستم این است که رویداد کلیک من در کامپوننت والد است در حالی که کلاس در کامپوننت فرزند قرار دارد. من قادر هستم که کامپوننت فرزند را با استفاده از دکوراتور @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]" >

پاسخ شماره ۱

شما باید آکولادها را از [class.scroll-view]="[isClassVisible]" حذف کنید تا

[class.scroll-view]="isClassVisible"

پاسخ شماره ۲

من یک راه حل برای این مشکل پیدا کردم. این راه حل شامل ارسال نام کلاسها بهعنوان ویژگیها به کامپوننت فرزند است. اگر چندین کلاس برای ارسال به مکانهای مختلف دارید، میتوانید یک ویژگی آرایهای ارسال کرده و آن را در مکانهای مناسب خروجی دهید.

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