angular - 组件声明、模板变量声明和元素引用不包含此类成员

Question

这可能是一个简单的修复。该元素应该在悬停时从页面顶部滑出。我的代码按预期工作，但出现此错误。

错误:

[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

我试过使用 ngIf 在元素的模板中定义它，如下所示:#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();
  }

}

Answer 1

实际上你的问题是你试图用原始 bool 值替换模型。 compartmentOpen 在你的例子中是一个 div 元素模型，包含很多东西。好消息是您可以像这样扩展您的模型

<div #compartmentOpen
    (mouseover)="compartmentOpen.open = true"
    (mouseout)="compartmentOpen.open = false"
    class="inner-container">

你的*ngIf语句将是

    *ngIf="compartmentOpen.open"

所有这些都将按您的需要正常运行。