在Angular 6中单击每个单选按钮时如何将相应的类添加到body元素答案

【问题标题】：How to add corresponding classes to the body element when each radio button is clicked in Angular 6在Angular 6中单击每个单选按钮时如何将相应的类添加到body元素
【发布时间】：2019-03-18 07:33:33
【问题描述】：

当我单击每个单选按钮时，我想将特定类添加到正文标记和活动类到父元素。

例如：

<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”的单选按钮时，应将一个类“a”添加到正文标记中，当我单击每个单选按钮时，它应相应地更改为类“b”和“c”。

【问题讨论】：

标签： angular typescript radio-button angularjs-ng-click ng-class

【解决方案1】：

从角度导入文档

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

【讨论】：

有没有办法给body添加多个类？如果我点击一些单选按钮，我想向 body 标签添加多个类。
是的，你可以使用 this.document.body.classList.add($event);它将像 a b c 一样附加类
我尝试使用这个 sn-p 来更改同一组件内导航栏的颜色，但不起作用！！。类 '.navbar-primary'、'.navbar-success' 等应该以相同的方式添加到导航栏。
你想改变颜色吗？
是的。我通过将选择器主体更改为导航栏来尝试相同的代码。