Javascript Girl
  1. Javascript Girl
  3. Classe angulaire 2.x bind sur l'étiquette du corps
Intereting Posts
Suivi des vues Google Analytics dans Angular2 Utilisation de FileReader dans Chrome Meteor: Erreur d'appel API basique de Facebook: jeton d'accès Base de données Web SQL + boucle de Javascript SVG: déplacement de la souris vers l'élément <image> déclenche l'événement mouseout de l'élément parent <g> (d3.js) Est-il possible d'attendre que tous les fichiers javascript soient chargés avant d'exécuter le code javascript? Comment obtenir les éléments précédents et suivants d'une boucle de tableau en JavaScript? JavaScript équivalent à printf / string.format Variable de nom d'utilisateur Windows et javascript Comment exclure les répertoires / fichiers du groupe de Meteor Le motif JavaScript regex se concatène avec une variable Comment réaliser que "ui-sref" soit exécuté conditionnellement? Passer des messages javascript localisés à partir de groupes de ressources en utilisant JSF CSlider: arrêtez l'affichage automatique sur mouseover Le routeur de fer de Meteor ne ferme pas le dialogue modal

Classe angulaire 2.x bind sur l'étiquette du corps

Étant donné que Angular 2.x est démarré dans un corps, comment puis-je ajouter [class.fixed]="isFixed" sur l'étiquette du corps (en dehors de ma application)? 

 <html> <head> </head> <body [class.fixed]="isFixed"> <my-app>Loading...</my-app> </body> </html>

Mon composant d'application ressemble 

 import {Component} from 'angular2/core'; import {CORE_DIRECTIVES} from 'angular2/common'; import {RouteConfig, ROUTER_DIRECTIVES, Router, Location} from 'angular2/router'; import {About} from './components/about/about'; import {Test} from './components/test/test'; @Component({ selector: 'my-app', providers: [], templateUrl: '/views/my-app.html', directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES], pipes: [] }) @RouteConfig([ {path: '/about', name: 'About', component: About, useAsDefault: true}, {path: '/test', name: 'Test', component: Test} ]) export class MyApp { router: Router; location: Location; constructor(router: Router, location: Location) { this.router = router; this.location = location; } }

L'utilisation de <body> tant que composant de l'application fonctionne bien, mais vous ne pouvez pas utiliser la liaison sur la <body> car elle tente de lier `" isFixed "au parent et il n'y a pas de parent.

Utilisez plutôt @HostBinding 

 @Component( selector: 'body', templateUrl: 'app_element.html' ) class AppElement { @HostBinding('class.fixed') bool isFixed = true; }

C'est un code Dart, mais il ne devrait pas être difficile de le traduire en TS.

Voir aussi @HostBinding et @HostListener: qu'est-ce qu'ils font et à quoi servent-ils?

Vous pouvez toujours utiliser JS ordinaire pour mettre à jour le DOM si vous ne dépendez pas du rendu côté serveur ou des opérateurs Web.

Alternativement, vous pouvez simplement utiliser 

 document.body.classList.add('foo');