Angular2使用父组件中的单击事件在子组件中切换类答案

【问题标题】：Angular2 Toggle Class in child component using a click event in parent componentAngular2使用父组件中的单击事件在子组件中切换类
【发布时间】：2016-12-19 00:39:18
【问题描述】：

我正在尝试使用单击事件打开/关闭类，我遇到的问题是我的单击事件在父组件中，而类在子组件中。我可以使用 @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]" >

【问题讨论】：

标签： angular typescript angular2-directives angular2-components

【解决方案1】：

您需要将大括号从 [class.scroll-view]="[isClassVisible]" 删除到

[class.scroll-view]="isClassVisible"

【讨论】：

如果我这样做，我将无法初始化类并且它不会像那样切换
你的应用程序有问题吗？
no plunker 一直在我身上崩溃我正在使用 angular2 quickstart repo，我向它添加了简单的代码

【解决方案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]}}" >

【讨论】：