@HostBinding Klasse von Kindkomponente deaktivieren Angular 4

Ich habe eine eckige App, die Benutzeranmeldung und -abmeldung hat. Ich zeige eine Startseite als Startseite an, bevor sich ein Benutzer anmeldet. Ich möchte ein Hintergrundbild nur auf der Begrüßungsseite aktivieren. Sobald sich der Benutzer anmeldet, muss das Hintergrundbild verschwinden. Wenn sich der Benutzer abmeldet, wird er zur Begrüßungsseite weitergeleitet, auf der das Hintergrundbild erneut angezeigt werden muss.@HostBinding Klasse von Kindkomponente deaktivieren Angular 4

Ich habe versucht, @HostBinding in der app.component.ts durch Umbenennen des Selektors zu "body".

app.component.ts 

import {Component, HostBinding, Input} from '@angular/core'; 
import {InputMask} from "primeng/primeng"; 

@Component({ 
    selector: 'body', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    path = '../assets/img/AvayaHome.jpg'; 
    title = 'app'; 
    toggleClass = true; 
    @HostBinding('class.bodyClass') isWelcomePage = this.toggleClass; 
}

Hier ist mein CSS.

app.component.css 

.bodyClass { 
    background-image: url("../assets/img/AvayaHome.jpg"); 
}

Hier ist meine index.html

<!doctype html> 
<html lang="en"> 
<head> 
<title> Something </title> 
</head> 
<body class="bodyClass"> 

    <app-welcome-page></app-welcome-page> 

</body> 
</html>

Ich bin ermöglicht die CSS-Stil für bodyClass von toggleClass als wahr zuweisen. Sobald sich der Benutzer anmeldet, ändere ich den Wert von toggleClass (in der app.component.ts) von der Kindkomponente.

Hier ist meine login.component.ts

onLogin() { 
    console.log('onLogin() invoked:', this._email, ':' , this.password); 
    if (this._email == null || this.password == null) { 
     this.errorMessage = 'All fields are required'; 
     return; 
    } 
    this.errorMessage = null; 
    this.loginservice.authenticate(this._email, this.password); 
    this.appComponent.toggleClass = true; 
    this.router.navigate(['/dashboard']); 
    }

Der Wert des toggleClass ändert sich, wenn sich der Benutzer anmeldet auf FALSCH. Aber ich sehe immer noch das Hintergrundbild. Nicht sicher, was ich falsch mache. Jede Hilfe wird geschätzt.

Quelle

2017-11-15 Jayanth Vishwanath

-1

Hostbinding bindet nur Zeug an Host-Tag, in Ihrem Fall-Tag.

Also wenn Sie das body-Tag manipulieren möchten, müssen Sie es mit Plan Javascript von Ihrer Komponente tun oder auch eine Komponente im Körper erstellen.

@Component({ 
    selector: 'body', 
    template: `<child></child>` 
}) 
export class AppComponent { 
    @HostBinding('class') public cssClass = 'class1'; 
}

Quelle

2017-11-15 15:55:50 Serginho

Wenn Sie dynamisch darstellen möchten, und einen Hintergrund verstecken Sie eine bedingte Klasse mit ngClass

Sie können mehr lesen Sie es verwenden sollten, um hier NgClass

In Ihrem Fall wäre es

<div [ngClass]="{'bodyClass': isWelcomePage}">  
    ... 
</div>

Dann bodyClass css Klasse gilt nur IFisWelcomePage ist true, wenn es false ist, wird es nicht angewendet und das Bild wird nicht angezeigt.

Edit:

Wie gewünscht, ein funktionierendes Beispiel: Plunkr

Quelle

2017-11-15 16:00:39

Does ngClass Arbeit für Body-Tag? –

NgClass funktioniert für jedes Tag, aber es muss sich in Ihrer Komponente befinden. –

Sie sollten eine _root_ Komponente haben, die das Body-Tag fälscht (überspannt die gesamte Website), wenn Sie solche Dinge tun möchten. –

Machen Sie eine Funktion mit, wenn und sonst;

if (user is login) { 
    document.body.classList.add('bodyClass'); 
} else { 
    document.body.classList.remove('bodyClass'); 
}

als die Funktion aufrufen, wann immer Sie brauchen, logInlogOut etc

Quelle

2017-11-15 16:52:21 ShadowFoOrm

Als Beispiel nehmen wir an diesem Code einen Blick:

var toggleClass = false; 
var isWelcomePage = toggleClass; 

console.log(isWelcomePage); // prints true

Cool, alles funktioniert wie erwartet.später

Zehn Sekunden ....

Einige Benutzer-Logins:

toggleClass = true; 

console.log(isWelcomePage); // prints false

Warum hat es nicht geändert ???

Wenn Sie alle Unterlagen oder jedes Buch über öffnen javascript Sie eine Hauptregel lesen:

Primitives sind immer unveränderlich.

Wenn wir toggleClass Variable isWelcomePage Variable = zuweisen, wir den Wert auf die neue Variable kopieren, weil Primitiven von Wert kopiert werden.

Lösung 1:

ändern isWelcomePage Eigenschaft direkt

onLogin() { 
    ... 
    this.appComponent.isWelcomePage = true; 
    ... 
}

Lösung 2

definieren Getter

@HostBinding('class.bodyClass') 
get isWelcomePage() { 
    return this.toggleClass; 
}

Quelle

2017-11-16 04:33:04 yurzui

@HostBinding Klasse von Kindkomponente deaktivieren Angular 4

Antwort

Verwandte Themen