Помощ при програмиране, отговори на въпроси / ъглов / как да се промени класа на тялото в проекта angular2 & typecript - ъглови, машинопис

как да промените класа на тялото в ъглово2 & машинописен проект - ъглово, машинописно

Имам diffirent класове за входна страница и други страници в приложението, така че след като потребителят влезе, трябва да променя класа на елемента на тялото. Ето как се опитвам да постигна това.

index.html

<body [ngClass]="{
"dashboard site-navbar-small" :isAuthenticated,
"login-form login-form-second page-login-second" :!isAuthenticated
}">
<app-root>Loading...</app-root>

export class LoginComponent {
@HostBinding("class.login-form.login-form-second.page-login-second")
siteNavbarSmallClass = false;
constructor(private auth:Auth){
this.siteNavbarSmallClass=this.auth.authenticated();
}
}

app.component.ts

 export class AppComponent {
@HostBinding("class.dashboard.site-navbar-small")
dashboardClass = false;
constructor(private auth:Auth){
this.dashboardClass=this.auth.authenticated();
}
}

Аз се опитвам да се обвърже директивата ngClass да isAuthenticated поле .. но аз doesn't засегнати. Чух, че не можем да променяме елемента на тялото чрез ts, как мога да се справя с него?

Отговори:

3 за отговор № 1

Връзки отвън <app-root> не се поддържат.

Какво можете да направите, е да използвате selector: "body" в теб AppComponent и

@HostBinding("class.dashboard")
dashboardClass = false;

@HostBinding("class.site-navbar-small")
siteNavbarSmallClass = false;

...

и след това задайте свойствата на true за да се добавят класовете.

или просто

document.body.classList.add("dashboard");

3 за отговор № 2

Един от начините е да ползвате <body> маркирайте елемента на приложението, като използвате body като селектор и използвайте host-binding за обновяване на класовете на елементите на приложението.

@Component({
selector: "body",
host:     {"[class.someClass]":"someField"}
})
export class AppComponent 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>`
}
}