Angular2 Klasse hinzufügen zu body-tag

Wie kann ich ein Klasse der Körper tag, ohne dass die Körper als app selector und die Verwendung von host-verbindlich?

Habe ich versucht, das mit dem Renderer aber es verändert den ganzen Körper

Winkel 2.x binden-Klasse am body-tag

Arbeite ich an einem großen angular2 app und ändern des root-Selektor wird Auswirkungen auf eine Menge von code, ich werde zu ändern, eine Menge code

Mein use-case ist dieses:

Beim öffnen eines modalen Komponente (dynamisch erstellt) ich möchte das Dokument scrollbar zu verstecken

Eigentlich, wenn Sie die Arbeit mit js, die in html-Seite, was ist das problem bei der Verwendung document.body.className|classList?
haha, wenn es nur so einfach 🙂 aber es ist eine schlechte Praxis, um Zugriff auf dom-direkt
Sie können schreiben, eine große wrapper ausgeführt wird, mehrere zweite und am Ende Hinzugefügt class zu body. Wenn Sie nicht gehen, um mit server-rendering oder web-worker, was hast du Angst?
es gibt also keine bessere Lösung als diese ?
Ich kann nicht verstehen, diese beleidigenden Leute, die downvote und in der Nähe Fragen, für die keine gültige Begründung

InformationsquelleAutor Rachid Oussanaa | 2017-04-21

  1. 138

    Ich würde lieben, Sie zu kommentieren. Aber aufgrund der fehlenden reputation Schreibe ich eine Antwort.
    Nun, ich kenne zwei Möglichkeiten, dieses Problem zu lösen.

    1. Injizieren, das Global-Dokument. Gut ist es vielleicht nicht die beste Praxis, da ich nicht weiß, ob nativescript etc unterstützt. Aber es ist zumindest besser als reines JS. 
    Konstruktor(@Inject(DOCUMENT) privates Dokument: Document) {} 

ngOnInit(){ 
diese.Dokument.Körper.classList.add('test'); 
}

    Gut und vielleicht sogar besser. Sie konnte Spritzen den renderer oder renderer 2 (SG4) und fügen Sie die Klasse mit dem renderer. 

    export-Klasse myModalComponent implementiert OnDestroy { 

Konstruktor(private-renderer: Renderer) { 
diese.renderer.setElementClass(document.Körper, 'modal-open", true); 
} 

ngOnDestroy() { 
diese.renderer.setElementClass(document.Körper, 'modal-öffnen', false); 
}

    BEARBEITEN FÜR ANGULAR4:

    import { Komponente, OnDestroy, Renderer2 } '@eckig/Kern'; 

export-Klasse myModalComponent implementiert OnDestroy { 

Konstruktor(private-renderer: Renderer2) { 
diese.renderer.addClass ("Dokument".Körper, 'modal-open'); 
} 

ngOnDestroy() { 
diese.renderer.removeClass ("Dokument".Körper, 'modal-open'); 
}
    danke für die Antwort, ich denke, mit der rendrer ist die beste Lösung
    Falls sich jemand Fragen, wo man DOKUMENTIEREN, das ist: import { DOCUMENT } from '@angular/platform-browser'
    Die Renderer-Lösung ist viel besser. Im Winkel 4, Renderer wurde als veraltet markiert und ersetzt mit Renderer2. Der code müsste sich ändern: this.renderer.addClass(document.body, 'modal-open'); und this.renderer.removeClass(document.body, 'modal-open');
    Auch @Inject(DOCUMENT) ist nicht mehr nötig, im Konstruktor
    Als update zu @Neph : importieren von Dokumenten von Plattform-browser ist veraltet. @Winkel/common statt.

    InformationsquelleAutor DaniS

  2. 10

    Ich denke, der beste Weg, es zu tun ist eine Kombination der beiden Ansätze von DaniS oben: Mit dem renderer zu setzen /entfernen der Klasse, aber auch die mithilfe der document-Injektor, also es ist nicht stark abhängig von der window.document aber das kann ersetzt werden dynamisch (z.B. beim Rendern von server-Seite). Also der ganze code würde dann wie folgt Aussehen:

    import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@Component({ /* ... */})
export class MyModalComponent implements OnInit, OnDestroy {
    constructor (
        @Inject(DOCUMENT) private document: Document,
        private renderer: Renderer2,
    ) { }

    ngOnInit(): void {
        this.renderer.addClass(this.document.body, 'embedded-body');
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body, 'embedded-body');
    }
}
    Danke, Danke, Danke, Danke, Danke, Danke, Danke 🙂

    InformationsquelleAutor DHainzl

Schreibe einen Kommentar