Как добавить соответствующие классы к элементу body при нажатии каждой радиокнопки в Angular 6 - PullRequest
Новая
       20

Как добавить соответствующие классы к элементу body при нажатии каждой радиокнопки в Angular 6

0 голосов
/ 13 октября 2018

Я хочу добавить определенный класс к тегу body и активный класс к родительскому элементу, когда нажимаю на каждые переключатели.

Например: 

<form action="">
 <input type="radio" value="layout1">Layout 1<br>
 <input type="radio" value="Layout2">Layout 2<br>
 <input type="radio" value="Layout3">Layout 3
</form>

Когда я нажимаюВ радио-кнопке со значением 'layout1' к тегу body следует добавить класс 'a', и он должен измениться на класс 'b' и 'c' соответственно, когда я нажимаю на каждую радио-кнопку.

1 Ответ

0 голосов
/ 13 октября 2018

импорт ДОКУМЕНТА из угловых 

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  layout1;
  layout;
  layout3;

  constructor(@Inject(DOCUMENT) private document: any) { }   
  addClass($event) {
    if (this.document.body.classList) {
      let className = Object['values'](this.document.body.classList).filter(d => d !== $event);
      className.map(d => this.document.body.classList.remove(d));
      this.document.body.classList.add($event);
    }
    else {
      this.document.body.classList.add($event);
    }

  }

}

component.html 

<form #f="ngForm">
 <input type="radio" value="a" (ngModelChange)="addClass($event)"[ngModel]="layout1" name="1"  ngModel>Layout 1<br>
 <input type="radio" value="b"(ngModelChange)="addClass($event)" [ngModel]="Layout2" name="1"  ngModel>Layout 2<br>
 <input type="radio" value="c" (ngModelChange)="addClass($event)" [ngModel]="layout3" name="1" ngModel>Layout 3
</form>

Пример: https://stackblitz.com/edit/angular-7ffxib

...