WebStorm，Angular 4中未解决的变量

Posted 2023-02-19

【中文标题】WebStorm，Angular 4中未解决的变量

【英文标题】：Unresolved variable in WebStorm, Angular 4

【发布时间】：2018-07-28 23:52:35

【问题描述】：

所以我有一个 html 模板，其中我引用了在构造函数中定义的服务，WebStorm 向我发送了有关未解析变量的警告，尽管我指向的变量已定义并通过导入链接到服务。

这是模板：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a routerLink="/" class="navbar-brand">Recipe Book</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li routerLinkActive="active"><a routerLink="/recipes">Recipies</a></li>
            <li routerLinkActive="active"><a routerLink="/shopping-list" >Shopping List</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
      <ng-template **[ngIf]="!authService.isAuthenticated()**">
        <li><a routerLink="/signup">Register</a></li>
        <li><a routerLink="/signin">LogIn</a></li>
      </ng-template>
            <li class="dropdown" app-dropdown>
                <a style="cursor: pointer" class="dropdown-toggle" role="button" *ngIf="authService.isAuthenticated()">Manage <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a style="cursor: pointer" (click)="OnSave()">Save Data</a></li>
                    <li><a style="cursor: pointer" (click)="OnGet()">Fetch Data</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

这是 TypeScript 代码：

import Component from '@angular/core';
import  Response  from '@angular/http';
import RecipeDataService from '../shared/RecipeData.service';
import SignupUserService from '../auth/signupUser.service';


@Component(
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
)
export class HeaderComponent 
  constructor(private RecipeDataService: RecipeDataService,
              **private authService: SignupUserService**)  
  OnSave()
  
    this.RecipeDataService.OnSaveRecipe()
      .subscribe(
        (response: Response) =>
        
          console.log(response);
        
      );
  
  OnGet()
  
    this.RecipeDataService.OnGettingRecipe();
  

及服务内容：

import Injectable from '@angular/core';
import * as firebase from 'firebase';


@Injectable()

export class SignupUserService 
  token = '';
  signUpUser(email: string, password: string) 
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(
        error => console.log(error)
      );
  
  signInUser(email: string, password: string)
  
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(
        response => 
          firebase.auth().currentUser.getIdToken()
            .then(
              (token: string) => this.token = token
            );
        
        )
      .catch (
        error => console.log(error); 
      );
  
  getToken() 
    firebase.auth().currentUser.getIdToken()
      .then(
        (token: string) => this.token = token
      );
    return this.token;
  
  isAuthenticated(): 
  
    return this.token != null;
  

【问题讨论】：

您是否已将SignupUserService 添加到您正在使用的任何模块（可能是AppModule）的providers 列表中？我知道当我尝试使用未正确提供的服务时，我使用的 IDE 有时会抱怨。

我确实在 Providers 数组中注册了我的服务，我刚刚仔细检查了这个问题。

一切都编译并运行了吗？如果是这样，听起来像是可以忽略的事情。或者，重新加载 IDE，看看它是否仍然存在。我必须经常用 VS Code 来做这件事。

也许return this.token != null; 应该是return this.token !== '';。空字符串不会为空。 this.token 被初始化为空字符串，而不是 null。 isAuthenticated() 之后的 : 只是一个错字吗？

那么，你现在好吗？一切都按您的需要运行？

【参考方案1】：

老问题，但我相信原因是/是因为服务在构造函数中被声明为私有。 改变这个：

constructor(private RecipeDataService: RecipeDataService,
              **private authService: SignupUserService**)  

到这里

constructor(private RecipeDataService: RecipeDataService,
              **public authService: SignupUserService**)  

https://youtrack.jetbrains.com/issue/WEB-23606?_ga=2.241092739.1642698293.1640193643-1459887653.1634674430