web-dev-qa-db-fra.com

Style html, corps du composant Web (Angular 2)

Je travaille sur un LoginComponent in Angular 2 qui devrait "remodeler" les balises html et body afin que je puisse les insérer une image d'arrière-plan spécifique à la page de connexion.

Mais ajouter juste un style pour le html, body dans mon login.css ne semble pas fonctionner.

Existe-t-il un moyen de remplacer le style sur le html, body à partir d'un composant? Ou n'importe quel élément d'ailleurs.

J'ai essayé des choses comme:

:Host(.btn) { ... }
:Host(.btn:Host) { ... }
.btn:Host { ... }

appliquer un style à un élément situé en dehors du composant Login. Mais rien ne semble fonctionner.

angularshadow-dom
40
Vivendi

Tu pourrais essayer

body {
  /* body styles here */
}

mais les styles de composants ne sont pas censés être appliqués à des éléments extérieurs à eux-mêmes.

Une autre méthode consiste à utiliser body comme sélecteur dans votre composant principal et à utiliser Host-binding pour définir/supprimer une classe CSS sur body afin que CSS que vous avez ajouté à votre index.html corresponde.

@Component({
  selector: "body", 
  Host: {
    "[class.some-class]":"someClass" 
  }, 
}) 
export class AppComponent {
  constructor(private loginService: LoginService) {
    loginService.isLoggedInChanged.subscribe((value) => {
      this.someClass = value;
    });
  }
  someClass: bool = false;
}

lorsque vous définissez someclass sur true (en liant une liaison à un service, la classe est ajoutée au corps.

Si vous ne souhaitez pas ajouter de CSS globalement, vous pouvez également lier directement à un attribut de style.

@Component({
  selector: "body", 
  Host: {
    "[style.background-image]":"bodyBackgroundImage()" 
  }, 
}) 
export class AppComponent {
  bool isLoggedIn = false;
  constructor(private loginService: LoginService) {
    loginService.isLoggedInChanged.subscribe((value) => {
      this.isLoggedIn = value;
    });
  }
  function bodyBackgroundImage() {
    return this.isLoggedIn ? 'url("gradient_bg.png")': 'none';
  }
}

mettre à jour

DomAdapter est parti. Renderer2 devrait fournir une fonctionnalité similaire.

Une façon de styler <body> _ directement à partir du composant de connexion est d'utiliser DomAdapter (voir aussi https://github.com/angular/angular/issues/4942 )

System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
  browser_adapter.BrowserDomAdapter.makeCurrent();
})
...
_dom: DomAdapter = new BrowserDomAdapter();
_dom.setStyle(_dom.query('body'), 'padding', '50px');
20
Günter Zöchbauer

Vous devez modifier la façon dont votre composant traite les CSS à l'aide de ViewEncapsulation . Par défaut, il est défini sur Emulated et angular sera

ajouter un attribut contenant l'identifiant de substitution et pré-traiter les règles de style

Pour changer ce comportement import ViewEncapsulation from 'angular2/core' et l’utiliser dans les métadonnées du composant:

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})
88
Sasxa

Je ne sais pas si c'est exactement ce que vous cherchez, mais cela ne vous laissera pas avec une image de fond du corps définitivement modifiée.

Voici comment je l'ai fait pour quelque chose de similaire. Si vous voulez avoir un impact sur l'image de fond du corps pour cette page, cela peut fonctionner. (Je n'ai pas encore testé cela à fond, mais cela semble fonctionner avec les navigateurs Windows.)

Dans votre composant, vous pouvez simplement travailler directement dans le DOM lorsque le composant est construit. Quand il est détruit, vous pouvez annuler le changement.

export class SpecialBackground  {
  constructor(){
    document.body.style.backgroundImage = "url('path/to/your/image.jpg')";
    document.body.style.backgroundPosition = "center center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
    document.body.style.backgroundSize = "cover";
  }
  ngOnDestroy(){
    document.body.style.backgroundImage = "none";
  }
}

Pour vos besoins, vous pouvez utiliser une fonction différente (plutôt que le constructeur) lorsque vous cliquez sur le bouton et vous devriez y aller.

16
jfgrissom

La façon dont je l'ai utilisé est

constructor() {
    document.body.className = "bg-gradient";
  }

ngOnDestroy(){
    document.body.className="";
  }

Cela ajoutera et supprimera dynamiquement le style du corps d'un composant particulier.

12
Akash Bavale

Je viens de modifier le fichier styles.scss et cela a fonctionné pour moi.

7
Omer

J'utilise cette approche dans mon composant, chargé dans routeur-prise:

      ngOnInit() {
        // Change <body> styling
        document.body.classList.add('align-content-between');
      }

      ngOnDestroy() {
        // Change <body> styling
        document.body.classList.remove('align-content-between');
      }
1
Anton Pegov

J'ai eu le même problème avec margin-top, la façon dont j'ai corrigé est

constructor(
    private _renderer: Renderer2,
) {
    this._renderer.removeStyle(document.body, 'margin-top');
}

Cela a parfaitement fonctionné pour moi.

1
Vamshi

Il est préférable d’ajouter un fichier css au niveau racine et de le configurer dans angular-cli.json OR ajoutez-le dans index.html. Afin que vous puissiez écrire vos styles de réinitialisation et globaux sans avoir à vous soucier de l’ombre dom et autres concepts.

0
Chaitanya Chauhan