Angular中的每个单选按钮被点击时，如何在body元素中添加对应的类 6

Question

我想在单击每个单选按钮时将特定的 class 添加到 body 标记并激活 class 到父元素。

例如：

<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' 的单选按钮时，应将 class 'a' 添加到 body 标记中，并且应更改为 class 'b' 和 'c' 当我点击每个单选按钮时相应地。

Answer 1

从 angular

导入文档

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

Angular中的每个单选按钮被点击时，如何在body元素中添加对应的类 6

How to add corresponding classes to the body element when each radio button is clicked in Angular 6

radio-button

typescript

angularjs-ng-click

ng-class

angular