javascript - descargar - pasar parametros entre componentes angular 2
Clase de enlace angular 2.x en la etiqueta del cuerpo (1)
Como Angular 2.x se inicia en un cuerpo, ¿cómo agrego [class.fixed]="isFixed" en la etiqueta del cuerpo (fuera de mi aplicación)?
<html>
<head>
</head>
<body [class.fixed]="isFixed">
<my-app>Loading...</my-app>
</body>
</html>
Mi componente de aplicación se ve como
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;
}
}
El uso de <body> como componente de la aplicación funciona bien, pero no se puede usar el enlace en la etiqueta <body> porque intenta enlazar `" isFixed "al elemento principal y no hay elementos principales.
Use @HostBinding en @HostBinding lugar
@Component(
selector: ''body'',
templateUrl: ''app_element.html''
)
class AppElement {
@HostBinding(''class.fixed'')
bool isFixed = true;
}
Este es el código Dart, pero no debería ser difícil traducirlo a TS.
Ver también @HostBinding y @HostListener: ¿qué hacen y para qué sirven?
Siempre puede usar JS simple para actualizar el DOM si no depende de la representación del servidor o de los trabajadores web.
Alternativamente, puedes simplemente usar
document.body.classList.add(''foo'');