有条件地在角度 2 中切换类答案

【问题标题】：Conditionally toggle class in angular 2有条件地在角度 2 中切换类
【发布时间】：2018-01-06 18:41:03
【问题描述】：

每当单击“app-header”组件中的按钮时，我都需要在应用程序组件中切换“活动”类。这是我的 app-component.html，

<div class="off-canvas">
    <app-header><app-header>
    <app-home></app-home>
    <app-footer></app-footer>
</div>

app-header.html

<div>
<!--Some code-->
<button></button>
</div>

由于 div 和按钮位于 2 个不同的组件中，我如何仅使用 angular 来做到这一点？？？？请帮助我是 angular 新手！！！

【问题讨论】：

标签： html angular

【解决方案1】：

您可以创建一个公共服务并将一个变量存储为公共，例如：

@Injectable()
export class DataService{
    foo:string;
}

然后使用两个组件中的变量作为共享变量，例如：

@Component({...})
export class FooComponent{
    constructor(private dataService:DataService){}

    foo():void{
        console.log(this.dataService.foo);
    }
}

【讨论】：

虽然这可能是解决问题的宝贵提示，但一个好的答案也可以证明解决方案。请edit 提供示例代码来说明您的意思。或者，考虑将其写为评论。

【解决方案2】：

您可以将您的对象绑定到 [ngClass] 指令：

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

要在组件之间共享数据，请参阅此答案：https://stackoverflow.com/a/45371025/1791913

【讨论】：

【解决方案3】：

您可以使用EventEmitter。

app-header.html

<div>
<!--Some code-->
<button (click)="emitClick()"></button>
</div>

app-header.ts

@Output() _clickEvent:EventEmitter<any>=new EventEmitter();

constructor(){
}
ngOnInit(){
}
emitClick($event){
  this.clickEvent.emit()
}

app-component.html

<div class="off-canvas" [ngClass]="{'someClassName':active}">
    <app-header (_clickEvent)="toggleActive($event)"><app-header>
    <app-home></app-home>
    <app-footer></app-footer>
</div>

应用组件.ts

  active:boolean=false;    
    constructor(){
    }
    ngOnInit(){
    }
   toggleActive($event){
    // Insert click event handling here
   }

您应该在 app-component.ts 中声明活动变量并将其初始化为布尔值。每次点击都会导致活动在真假之间切换。只要“活动”变量为真，ngClass 就会添加一个名为“someClassName”的类。

【讨论】：

您缺少一些引号，您当前的示例不是有效的 Angular 模板语法。
有没有办法在app-component.ts中监听这个事件???
@Laoujin 对不起，我已经添加了引号。
@Mr.Gaja 是的，你可以，我编辑了我的答案并添加了 toggleActive() 函数。希望它有帮助..
@Output() 必须添加到 app-header.ts ，@Output() _clickEvent:EventEmitter=new EventEmitter();