学习 Angular2 TypeScript2：共享 class 没有指令错误

Question

我是一名 Web 开发人员，对 Angular2 和 TypeScript 完全陌生..嗯，对一般的应用程序来说是新手。

我正在尝试设置一个共享 class，我的各种对象可以从中获取用户数据，例如 SessionID。我的问题是我不知道如何获得可以执行 HTTP 请求的构造函数。

我正在使用 Ionic2、Angular2 和 Typescript，它们都在 Visual Code 中。我开始用 ionic 为我构建一个模板，我在 Visual Code 中没有出现错误，但是在运行 "ionic serve --address 192.168.1.128"

之后出现以下错误

Uncaught Error: No Directive annotation found on CurrentUser at DirectiveResolver.resolve (http://192.168.1.128:8100/build/main.js:23898:19) at CompileMetadataResolver.getDirectiveMetadata (http://192.168.1.128:8100/build/main.js:24885:51) at RuntimeCompiler._createCompiledHostTemplate (http://192.168.1.128:8100/build/main.js:39289:51) at http://192.168.1.128:8100/build/main.js:39246:37 at Array.forEach (native) at http://192.168.1.128:8100/build/main.js:39245:45 at Array.forEach (native) at RuntimeCompiler._compileComponents (http://192.168.1.128:8100/build/main.js:39236:43) at RuntimeCompiler._compileModuleAndComponents (http://192.168.1.128:8100/build/main.js:39173:37) at RuntimeCompiler.compileModuleAsync (http://192.168.1.128:8100/build/main.js:39164:21)

根据我的了解，我认为这个问题的重要参与者是：

/src/app/app.compnonent.ts
/src/app/app.module.ts
/src/app/service/currentuser.ts
/tsconfig.json
/package.json

如果我是对的，这些文件在下面。

那么我怎样才能得到用传递给它的 HTTP 对象构造的 CurrentUser class？我做错了什么？

app.compnonent.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, NavController, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';
import { CurrentUser } from './service/currentUser';

@Component({
  templateUrl: 'app.html',
  providers: [CurrentUser]
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage = TabsPage;

  constructor(platform: Platform, public _user: CurrentUser, private _navCtrl: NavController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
      if (!_user.sessionId) {
        _navCtrl.push("login.html");
      }
    });
  }
}

app.module.ts

import { CurrentUser } from './service/currentUser';
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    LoginPage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp, CurrentUser],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    LoginPage,
    TabsPage
  ],
  providers: [CurrentUser]
})
export class AppModule {}

currentUser.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class CurrentUser {
  public sessionId: string;
  private local: Storage;

  constructor(private _http: Http) {
    this.local = new Storage();
    if (this.local.getItem("user-profile")) {
      var profile = JSON.parse(this.local.getItem("user-profile"));
      this.sessionId = profile.sessionId;
    } else {
      this.sessionId = null;
    }
  }

  public login(email: string, password: string) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return new Promise((resolve, reject) => {
    this._http.get("http://example.com/svc/rest.php?action=login&email=" + email + "&password=" + password, options)
      .subscribe((data) => {
        console.log(data);
      });
    });
  }
  public create(email: string, password: string, name: string) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return new Promise((resolve, reject) => {
    this._http.post("http://example.com/svc/rest.php", { action: "user", email: email, password: password, name: name}, options)
      .subscribe((data) => {
        console.log(data);
      });
    });
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

package.json

{
  "name": "example",
  "author": "Wade McDaniel",
  "homepage": "http://example.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.38",
    "typescript": "2.0.6"
  },
  "description": "example app",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

谢谢！

更新事实证明，Storage() 使 CurrentUser 构造函数无效。原因见下方评论。谢谢 silentsod！

现在弄清楚如何从 CurrentUser 获取 Storage...

Answer 1

不要bootstrap CurrentUser，bootstrapping 正在设置入口组件，而CurrentUser 是共享服务，它不是入口组件。

这是文档：https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-entry-component-defined

Any component that Angular loads imperatively by type is an entry component,

A component loaded declaratively via its selector is not an entry component.

<...>

Most application developers won't need to add components to the entryComponents.

您还询问了有关 Http 在您的构造函数中可用的问题。在你的 app.module.ts 中你应该这样做：

import { HttpModule } from "@angular/http";

@NgModule({
<...>
imports: [<...>, HttpModule]
})

这将实例化一个 Http 提供程序，供您随意注入。

学习 Angular2 TypeScript2：共享 class 没有指令错误

Learning Angular2 TypeScript2: No Directive error with shared class

ionic2

typescript2.0

angular