@HostBinding子コンポーネントからのクラスを無効にする角度4

私は、ユーザーのログインとログアウトがある角度のあるアプリを持っています。私は、ユーザーがログインする前にホームページとしてウェルカムページを表示しています。ウェルカムページでのみ、バックグラウンドイメージを有効にします。ユーザーがログインすると、背景イメージが消える必要があります。ユーザーがログアウトすると、ウェルカムページにリダイレクトされ、背景イメージを再度表示する必要があります。@HostBinding子コンポーネントからのクラスを無効にする角度4

私はapp.component.tsで@HostBindingを使用して、セレクタの名前を '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; 
}

ここは私のCSSです。

app.component.css 

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

は、ここに私のindex.html

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

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

</body> 
</html>

私は本当のようtoggleClassを割り当てることによってbodyClassのCSSスタイルを可能にしています。ユーザーがログインすると、（app.component.ts内にある）toggleClassの値を子コンポーネントから変更します。

は、ここに私の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']); 
    }

toggleClassの値は時にユーザーがログインするFALSEに変更されています。しかし、私はまだ背景のイメージを見ています。私が間違っていることを確認していない。どんな助けもありがとう。

出典

2017-11-15 Jayanth Vishwanath

-1

ホストバインディングは、あなたのケースタグ内のstuffタグのみをバインドします。

bodyタグを操作する場合は、コンポーネントのjavascriptを使用してbodyタグを操作するか、本体にコンポーネントを作成する必要があります。

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

出典

2017-11-15 15:55:50 Serginho

あなたが動的に表示し、ngClass

条件付きクラスを使用する必要があります背景を非表示にする場合、それは次のようになり、あなたの場合は

NgClassここでそれについてあなたはより多くを読むことができます

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

次にbodyClassのCSSクラスが適用されますIFisWelcomePageはtrueです。falseの場合は適用されず、画像は表示されません。

編集：要求され、作業例として

：Plunkr

出典

2017-11-15 16:00:39

んngClass作業を定義しますか？ –

NgClassはどのタグでも機能しますが、コンポーネント内にある必要があります。 –

このようなことをしたい場合は、bodyタグを（ウェブサイト全体に）偽装する_root_コンポーネントが必要です。 –

場合とそうでないと機能を確認します。例として、あなたが必要とするとき、その関数を呼び出したより

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

、logInlogOutなど

出典

2017-11-15 16:52:21 ShadowFoOrm

、のは、このコードを見てみましょう：

var toggleClass = false; 
var isWelcomePage = toggleClass; 

console.log(isWelcomePage); // prints true

クール、期待通りにすべてが機能します。

10秒後....

一部のユーザーログイン：

toggleClass = true; 

console.log(isWelcomePage); // prints false

それは変わっていないのはなぜ？あなたは一つのメインのルールを読むことができるのjavascriptについてのマニュアルまたは任意の本を開くと

：

プリミティブは常に不変です。私たちは=を使用してisWelcomePage変数にtoggleClass変数を割り当てる場合は、プリミティブが値によってコピーされるため

することは、我々は新しい変数に値をコピー。

解決方法1：

変更isWelcomePage財産直接

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

ソリューション2

bodyタグのgetter

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

出典

2017-11-16 04:33:04 yurzui

@HostBinding子コンポーネントからのクラスを無効にする角度4

答えて

関連する問題