Alternar a classe condicionalmente no angular 2
Preciso de activar ou desactivar uma classe "activa" no componente app sempre que for carregado um botão no componente "app-header". Aqui está o meu componente de Aplicação.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>
Como posso fazer isto usando apenas angular, uma vez que o div e o botão estão em dois componentes diferentes????por favor, ajudem-me a ser novo no angular!!!
3 answers
Pode usar O evento emissor .
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()
}
Componente de aplicações.html
<div class="off-canvas" [ngClass]="{'someClassName':active}">
<app-header (_clickEvent)="toggleActive($event)"><app-header>
<app-home></app-home>
<app-footer></app-footer>
</div>
Componente de aplicações.ts
active:boolean=false;
constructor(){
}
ngOnInit(){
}
toggleActive($event){
// Insert click event handling here
}
Deve declarar a variável activa no seu componente app.ts e inicializei-o para Boolean. Cada clique fará com que o activo alterne entre verdadeiro e falso. Uma classe chamada 'someClassName' será adicionada pela ngClass sempre que a variável' activa ' for verdadeira.
Pode ligar o seu objecto à Directiva [ngClass]:
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
Para partilhar dados entre componentes, ver esta resposta: https://stackoverflow.com/a/45371025/1791913
Pode criar um serviço comum e armazenar uma variável como pública, por exemplo:
@Injectable()
export class DataService{
foo:string;
}
Utilize então a variável em ambos os componentes como uma variável partilhada, por exemplo:
@Component({...})
export class FooComponent{
constructor(private dataService:DataService){}
foo():void{
console.log(this.dataService.foo);
}
}