在Angular 2中有条件地切换类

Question

当“app-header”组件中的按钮被点击时，我需要在app-component中的元素上切换一个“active”类。下面是我的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>

我该如何仅使用Angular来完成此操作，因为这个div和button位于两个不同的组件中？？？？请帮帮我，我是Angular新手！！！

- Mr.Gaja

Answer 1

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

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

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

- FAISAL

Answer 2

您可以使用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>

app-component.ts

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

您需要在app-component.ts中声明active变量，并将其初始化为布尔值。每次点击都会导致active在true和false之间切换。 当'active'变量为true时，ngClass将添加名为'someClassName'的类。

- Gili Yaniv

---

您缺少一些引号，您当前的示例不是有效的Angular模板语法。 - Laoujin

在 app-component.ts 中有没有一种方法可以监听此事件 <app-header (_clickEvent)=active=!active><app-header>？ - Mr.Gaja

@Laoujin 抱歉，我已经添加了引号。 - Gili Yaniv

@Mr.Gaja 是的，你可以。我已经编辑了我的答案并添加了toggleActive()函数。希望能有所帮助。 - Gili Yaniv

@Output() 必须添加到 app-header.ts 中， @Output() _clickEvent:EventEmitter<any>=new EventEmitter(); - Mr.Gaja

Answer 3

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

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

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

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

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

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

- Anas

---

虽然这可能是解决问题的有价值的提示，但一个好的答案也应该展示解决方案。请编辑以提供示例代码来说明您的意思。或者，考虑将其编写为评论。 - Toby Speight