[英]Angular2 Toggle Class in child component using a click event in parent component
我試圖使用click事件來打開/關閉一個類,我遇到的問題是我的click事件在父組件中,而Class在子組件中。 我可以使用@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]}}" >
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.