Wie ändere ich die Body-Klasse über eine Typoskript-Klasse (angular2)

Wie ändere ich die Body-Klasse über die Root-Komponente?Wie ändere ich die Body-Klasse über eine Typoskript-Klasse (angular2)

@Component({ 
    selector: "app", 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
     <section class="header"> 
      <h1>App</h1> 
      <router-outlet></router-outlet> ` 
})

Quelle

2016-01-06 Anonymous

Sie wollen eine CSS-Klasse auf den '' Tag hinzuzufügen/entfernen? –

Ja, wenn ein Benutzer ein Kontrollkästchen aktiviert hat, möchte ich meinen Stil der Seite ändern. Also ich möchte die Klasse des Body-Tags ändern. –

Mögliches Duplikat von [Angular 2.x bind class auf body tag] (http://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag) –

Eine Möglichkeit, die nicht auf direkte DOM-Manipulation ist abhängt, die <body> Tag der App-Element zu machen, indem body als Wähler und verwenden Host-Bindung der App Elemente Klassen zu aktualisieren verwenden.

@Component({ 
    selector: 'body', 
    host:  {'[class.someClass]':'someField'} 
}) 
export class AppElement implements AfterViewInit { 
    someField: bool = false; 
    // alternatively to the host parameter in `@Component` 
    // @HostBinding('class.someClass') someField: bool = false; 

    ngAfterViewInit() { 
    someField = true; // set class `someClass` on `<body>` 
    } 
}

Quelle

2016-01-06 15:41:40

Ist es auch möglich zu Den Wert für 'someField' von einer Funktion zur Laufzeit umschalten? –

@FerdiEmmen, so soll es benutzt werden. –

Ok, wie kann ich dann die Klasse mit einem Button umschalten? –

Hier können Sie einfache Nutzung der nativen JavaScript in Angular2 Komponente die Klasse des <body> Tag ändern: -

let body = document.getElementsByTagName('body')[0]; 
body.classList.remove("className"); //remove the class 
body.classList.add("className"); //add the class

Quelle

2016-10-19 09:15:00 Saurabh

Immer noch in Angular2 funktioniert es nicht Wir werden eine separate Stilklasse hinzugefügt – Lijo

Ich arbeite für mich, danke. –

immer noch nach einer besseren Lösung suchen, hier ist meine aktuelle Problemumgehung :

import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; 


@Component({ 
    selector: 'signup', 
    templateUrl: './signup.component.html', 
    styleUrls: ['./signup.component.css',], // Where my custom CSS styles for body element declared 
    encapsulation: ViewEncapsulation.None, // That will not encapsulate my CSS styles (layout-full, page-signup) from signup.component.css inside component 
}) 


export class SignupComponent implements OnInit, OnDestroy{ 

    bodyClasses:string = "layout-full page-signup"; 

    ngOnInit(): void { 
     $('body').addClass(this.bodyClasses); 
    } 
    ngOnDestroy() { 
     $('body').removeClass(this.bodyClasses); 
    } 


}

Quelle

2016-11-05 13:32:44

wenn das ist jquery eine bessere lösung wäre nur eine andere antwort zu verwenden, kein punkt einschließlich der ganzen bibliothek –

i resove den routeing durch die Verwendung - wie diese -add zu die Wurzel-App-Komponente dieser Code:

this.activeRouter.events.subscribe(
     data => { 
     this.className = data.url.split('/').join(' ').trim(); 
     this.changeBodyClass(); 
     })

und der Körper Änderung:

changeBodyClass(){ 
    if(this.el.nativeElement.parentElement.nodeName === 'BODY'){ 
     this.el.nativeElement.parentElement.className = this.className ? this.className + '-page' : 'home-page'; 
    }

Sie in der constractor injizieren müssen:

constructor(private activeRouter: Router, 
       private el: ElementRef)

Quelle

2017-03-02 13:45:29

Excellent thanks! – Gowri

Falls jemand hinzufügen muss, und entfernen Klasse von Körper nur wenn eine bestimmte Komponente aktiv ist, kann es wie folgt getan werden. In meinem speziellen Fall wollte ich die „Landungs Seite“ Klasse hinzufügen nur, wenn der Benutzer landet auf Home (View) und die Klasse entfernen, wenn der Benutzer zu anderen Ansichten navigiert:

import {Component, OnInit, OnDestroy} from '@angular/core'; 

export class HomeComponent implements OnInit { 

    constructor() {} 

    //Add the class to body tag when the View is initialized 
    ngOnInit() { 
     let body = document.getElementsByTagName('body')[0]; 
     body.classList.add("landing-page"); 
    } 

    //Remove the class from body tag when the View is destroyed 
    ngOnDestroy() { 
     let body = document.getElementsByTagName('body')[0]; 
     body.classList.remove("landing-page"); 
    } 
}

Quelle

2017-05-02 17:48:00 Devner

Verwenden Sie die folgenden Code ein.

ngOnInit() { 
 
    let body = document.getElementsByTagName('body')[0]; 
 
    body.classList.add('body-landing'); 
 
    } 
 
    
 
    
 
    ngOnDestroy() { 
 
    let body = document.getElementsByTagName('body')[0]; 
 
    body.classList.remove("body-landing"); 
 
    }

Quelle

2017-09-19 11:39:37

aleady gleiche Antwort verfügbar plz vermeiden Duplikate – Lijo

Wie ändere ich die Body-Klasse über eine Typoskript-Klasse (angular2)

Antwort

Verwandte Themen