标签: angular2-services

有问题的来源:https://github.com/clicman/angular2-app/

我试图将Http注入服务并导致错误:

http:1 Uncaught SyntaxError: Unexpected token <__exec @ system.src.js:1374entry.execute @
 system.src.js:3300linkDynamicModule @ system.src.js:2921link @ system.src.js:2764execute @
 system.src.js:3096doDynamicExecute @ system.src.js:715link @ system.src.js:908doLink @
 system.src.js:569updateLinkSetOnLoad @ system.src.js:617(anonymous function) @ system.src.js:430run @
 angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @
 angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @
 angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous
 function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @
 angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 
angular2-polyfills.js:138 Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/angular2/src/http/http
    Error loading http://localhost:3000/scripts/boot.js

服务代码:

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/src/http/http';
@Injectable()
export class CommentsService {
  constructor(private _http: Http) { …

我认为DI的实现是为了允许在应用程序上使用相同的服务,并根据需要进行更改.但是这个代码片段(Angular 2.0.0-beta.0)拒绝工作:

# boot.ts
import {ProjectService} from './project.service'

bootstrap(AppComponent, [ProjectService]);



# my.component.ts
export class MyComponent {
    constructor(project: ProjectService) {
    }
}

它具有明确的服务要求:

# my.component.ts
import {ProjectService} from './project.service';
export class MyComponent {
    constructor(project: ProjectService) {
    }
}

官方文档有点不一致,但在plunkr示例中也是如此:

# boot.ts
import {HeroesListComponent} from './heroes-list.component';
import {HeroesService}       from './heroes.service';

bootstrap(HeroesListComponent, [HeroesService])



# heroes-list.component.ts
import {HeroesService} from './heroes.service';

这是DI使用的预期方式吗？为什么我们必须在每个需要它的类中导入服务,如果我们不能在启动时描述服务,那么它的好处在哪里？

目前,我有一项服务可以从我编写的许多API中获取值.在模板中,我希望只有当值存在时才输出以下html,或者当它们被送到模板时结果中不为空:

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

所以我试图找出如何在ngIf中包装它或者是否有其他方法来执行此操作,以便只有当该值存在且非空时才会输出此'li'项

我有这种情况.

backend.json

{
"devServer": "http://server1/'",
"proServer" : "http://server2/'",
"use" :  "devServer"
}

global.service.ts

import {Injectable} from '@angular/core';
import {Http, HTTP_PROVIDERS, Response, RequestOptions, URLSearchParams} from '@angular/http';
@Injectable()
export class GlobalService {
constructor(private _http: Http){}
getBackendServer(){
    return this.server = this._http.get('./backend.json')
        .map((res:Response) => res.json())
}
}

我还有其他服务:search.service.ts

import {Injectable} from '@angular/core';
import {Http, HTTP_PROVIDERS, Response, RequestOptions, URLSearchParams} from '@angular/http';
import {GlobalService} from '../services/global.service';
import 'rxjs/add/operator/map';
@Injectable()
export class SearchService {
server;
constructor( private _http: Http, private gs: GlobalService ) {
    this.server = gs.getBackendServer().subscribe( …

我正在开发Angular 2项目并遵循Http Client Guide来实现HTTP请求但在使用RsJx模块时收到以下错误.

'Observable'类型中不存在'toPromise'属性

我已完成以下操作,但错误仍然存​​在:

• 补充import 'rxjs/add/operator/toPromise'; 服务模块
• 检查RxJs库的版本是否存在依赖关系.
• 从中导入所有模块 RxJs library

你可以找到我的源代码在这里 Github上.请指导我应该做什么以及我缺少什么.谢谢.

您可以在rxjs-operators.ts文件中找到所有导入,我在app.component.ts文件中引用它以使其全局但仍然在dragon.service.ts文件中有错误.此外,.map()也显示相同的错误.

您可以在package.json文件中找到所有版本的详细信息.

其他细节是:

• 节点版本:v4.4.7
• npm版本:v3.10.5
• 角度版本:2.0.0-rc.4
• RxJs版本:5.0.0-beta.6

注意: 现在我已对代码进行了评论,但您可以根据需要进行修改.

我正在使用AngularFire2.这就是我接近我的AuthGuard服务的方式:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    this.af.auth.subscribe((auth) =>  {
      if(auth == null) {
        this.router.navigate(['/login']);
        this.allowed = false;
      } else {
        this.allowed = true;
      }
    })
    return this.allowed;
  }

上面的代码有效,除非我直接访问受保护的页面(我在浏览器中输入URL),它在订阅解析为true后不会加载相应的组件.

在角度1中,保护路线是确保在路线加载之前先解决某些事情.

它出现在角度2中,路由加载(无论是真还是假,并且不等待来自线路的任何响应),因此当订阅值返回为真时,我必须转到另一条路线,然后返回在它工作之前.

什么是保护我的路线在Angular 2中响应的正确方法？

在Angular2中传递实例方法.

login()在以下代码中从模板调用时,我收到此错误:

Failure TypeError: Cannot read property 'router' of null
    at AuthLoginComponent.success (auth-login.component.ts:30)
    at ZoneDelegate.invoke (zone.js:242)
    at Object.onInvoke (core.umd.js:4391)
    at ZoneDelegate.invoke (zone.js:241)
    at Zone.run (zone.js:113)
    at zone.js:520
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.js:4382)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at drainMicroTaskQueue (zone.js:418)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:349)

在以下代码中:

@Component({
    moduleId: module.id,
    selector: "app-auth-login",
    templateUrl: "/app/components/auth/login/auth-login.component.html"
})
export class AuthLoginComponent implements OnInit {
    username : "";
    password : "";

    constructor(
        private authLoginService: AuthLoginService,
        private router: Router
    ) {}

    ngOnInit(): void {
    } …

按照教程,教师正在使用spotify api构建spotify音乐搜索.按照教练所做的每一步,但问题是我的数据永远不会回来,我得到了未定义,没有任何东西出现在屏幕上.但是,如果我直接在浏览器中点击api,则会显示json数据,但不会在我的应用中显示.

其实我已经看过很多像这样的问题,但没有一个能解决我的问题.我认为它可能是一个与网络相关的问题,但是当我设置断点时,我可以在响应中看到结果,但是没有任何东西被加载到视图中,未定义被加载到控制台中

**search.component.html**
<h1>Need Music?</h1>
<p class="lead">
  Use the ngSpotify app to browse new releases of your favorite songs. See what your favorite artistes are up to.
</p>
<form>
  <div class="form-group">
    <input type="text" name="searchStr" [(ngModel)]="searchStr" (keyup.enter)="searchMusic()" class="form-control" placeholder="Search music here..."/>
  </div>
</form>

**search.component.ts**
import { Component, OnInit } from '@angular/core';
import { SpotifyService } from '../../Services/spotify.service';  
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  constructor(private _spotifyservice: SpotifyService) { }

  searchStr: string;
  searchResult;

  searchMusic() …

我有一个酒店预订项目，使用angular2创建前端，使用laravel创建后端，这是一个API系统。我在angular2中有一张表。为此，我从laravel获取了预订数据，并将其绑定在角度表中，但是我不知道分页如何通过api工作。最初，我仅获取并绑定了15个数据。当我们单击下一页时，如何访问更多数据。这是laravel angular的代码。

拉拉韦尔

public function index()
{
   $bookings = Booking::where('is_delete', 0)
            ->paginate(15);

   return response()->json(['bookingDetails' => $bookings], 200);
}

角度2

booking.service.ts

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

import { Bookings } from './booking';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from "rxjs";

@Injectable()
export class BookingService {
    private headers = new Headers({'Content-Type': 'application/json'});
    private _url: string = 'http://cabinapi.app/api/bookings/';
    /*private _url: string = 'apidata/testData.json';*/
    constructor(private http: Http) { }

    getBooking(): Observable<any> …

我有一个名为abc的组件，并且在该组件中有三个名为title，Desc，Name的变量，当我尝试从嵌套函数访问它时，它给了我未定义的含义。

例如

@Component({
  selector: 'abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.css'],
  providers: [abcService]
})

export class abcComponent implements AfterViewInit,AfterViewChecked {

  title;
  Desc;
  Name;
  date=null;

test(){
this.title='a';
//work fine
}

test11(){

$('#cmg tbody').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
this.title= false;  //gives me an undefined
});

}

}