これはおそらく簡単な修正です。要素はホバー時にページの上部からスライドするはずです。コードは意図したとおりに機能していますが、このエラーが発生します。
エラー:
[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
次のようにngIfを使用して要素のテンプレートで定義しようとしました:#compartmentOpenこれはエラーを解消しますが、要素全体の真実性を取得しようとするため、コードは実行されません。
また、次のように定義してみました。compartmentOpen;コンポーネントでは、それは何もしません。
テンプレート:
<div class="container">
<div #compartmentOpen
(mouseover)="compartmentOpen = true"
(mouseout)="compartmentOpen = false"
class="inner-container">
<div class="grid-center">
<div class="z-bottom"
*ngIf="compartmentOpen"> Facebook Login coming soon!
<br>
<br>
<br>
<br>
</div>
<button (click)="googleLogin()"
class="btn btn-primary google-btn-size animated bounce">
Login with Google
</button>
<br>
<div id="wave">
<span class="dot dot-ani"></span>
<span class="dot dot-ani"></span>
<span class="dot dot-ani"></span>
</div>
</div>
</div>
</div>
成分:
import { AuthService } from './../auth.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(private auth: AuthService) { }
googleLogin() {
this.auth.googleLogin();
}
}
実際には、モデルをプリミティブなブール値に置き換えようとしているという問題があります。あなたの場合のcompartmentOpen
はdiv要素モデルであり、たくさんのものを含んでいます。このようにモデルを拡張できるという朗報
<div #compartmentOpen
(mouseover)="compartmentOpen.open = true"
(mouseout)="compartmentOpen.open = false"
class="inner-container">
そしてあなたの *ngIf
ステートメントは
*ngIf="compartmentOpen.open"
そして、すべてがエラーなしで必要に応じて機能します。
コンポーネント内でプロパティを宣言する必要があります:
import { AuthService } from './../auth.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
compartmentOpen = false;
constructor(private auth: AuthService) { }
googleLogin() {
this.auth.googleLogin();
}
}
編集:そして、テンプレート参照変数#compartmentOpen
を削除します。