Comment puis-je changer le corps de la classe par l'intermédiaire d'un tapuscrit de classe (angular2)

Comment puis-je changer le corps de la classe via le composant racine? 

@Component({ 
   selector: "app", 
   directives: [ROUTER_DIRECTIVES], 
   template: ` 
       <section class="header"> 
           <h1>App</h1>  
           <router-outlet></router-outlet> ` 
})
  • Vous souhaitez ajouter/supprimer une classe CSS à l' <body> tag?
  • oui, lorsqu'un utilisateur coché une case à cocher je veux changer mon style de la page. Donc je veux changer la classe de la balise body.
  • Double Possible de Angulaire 2.x lier la classe sur le corps de la balise
InformationsquelleAutor | 2016-01-06
  1. 21

    Ici, vous pouvez simplement utiliser le JavaScript natif dans la Angular2 composant à modifier la classe de la <body> tag:-

    let body = document.getElementsByTagName('body')[0];
body.classList.remove("className");   //remove the class
body.classList.add("className");   //add the class
    • Toujours dans Angular2 ça ne fonctionne pas, nous allons avoir une classe de style ajouté
    • Je pas faire de travail pour moi, merci de l'u.
    • Ce n'est pas vraiment une réponse angulaire
    InformationsquelleAutor Saurabh
  2. 20

    D'une façon qui ne dépend pas directement de manipulation du DOM est, pour faire de la <body> balise de l'application de l'élément en utilisant body comme un sélecteur et l'utilisation d'accueil de liaison de mise à jour de l'application des éléments des classes.

    @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>`
  }
}
    • Il est également possible de changer la someField valeur à partir d'une fonction de l'exécution?
    • c'est la façon dont il est censé être utilisé.
    • Ok, comment puis-je basculer la classe avec un bouton?
    • template: '<button (click)="someField = !someField">toggle</button>'
    • Merci pour votre réponse, mais je suppose que je n'ai pas été assez clair. J'ai créé un plunkr plnkr.co/modifier/ra8uK5MoYyenhAPYHpLY?p=preview
    • Merci pour le plunker mais on ignore toujours ce que vous essayez d'accomplir. Qu'attendez-vous de la Body composant à faire? Juste l'ajout providers à Toggle, le composant que vous bootstrap Angulaire avec, ne pas faire n'importe quoi. Vous aussi vous ne pouvez joindre le composant racine à la balise body.
    • Laissez-nous continuer cette discussion dans le chat.
    • où ajouter @Composant avec body le sélecteur?
    • Il doit être le composant racine (AppComponent). Il n'y a aucun moyen de le faire sur n'importe quel autre composant.
    • J'ai selector: 'app-root', Si je change de body ça va fonctionner?
    • Oui. Vous devez être conscient que tous les <body> le contenu de la balise sera purgée lors de votre AppComponent obtient initialisé. Donc si vous avez des balises de script ou d'autres contenus à l'intérieur de <body>, vous devez déplacer ces quelque part d'autre ou utiliser une autre approche pour définir la classe sur <body>.

    InformationsquelleAutor Günter Zöchbauer
  3. 4

    Toujours à la recherche d'une meilleure solution, voici ma solution actuelle:

    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);
    }


}
    • si c'est jquery, une meilleure solution serait tout simplement d'utiliser une autre réponse, pas de point, y compris l'ensemble de la bibliothèque
    InformationsquelleAutor Alex Paramonov
  4. 3

    Dans le cas où quelqu'un a besoin d'ajouter et de supprimer la classe de corps seulement lorsqu'un composant est actif, il peut être fait comme ci-dessous. Dans mon cas précis, je voulais ajouter le "de la page de destination" classe uniquement lorsque l'utilisateur des terres sur la Page d'Accueil (point de Vue) et de supprimer la classe lorsque l'utilisateur accède à d'autres points de vue:

    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");
    }
}
    InformationsquelleAutor Devner
  5. 2

    je resove il par l'utilisation de routage comme ceci
    -ajouter à la racine de l'application composant ce code : 

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

    et le changement du corps:

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

    vous avez besoin pour l'injecter dans le constractor:

    constructor(private activeRouter: Router,
              private el: ElementRef)
    • Excellent merci!
    InformationsquelleAutor yanai edri
  6. 2

    Utilisez code ci-dessous.

    JS:

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

    • aleady même réponse plz éviter les doublons
    • J'ai pensé accédant directement les attributs de l'élément a été découragé?
    InformationsquelleAutor Lakin Mohapatra