标签: angular2-services

我使用 angular-cli 创建了一个简单的应用程序来说明我的问题。你可以在这里看到所有的代码：https : //github.com/wholladay/tracking

每当单击包含元素时，该指令都会调用服务。因此，我想模拟该服务并确保在将点击事件发送到指令时调用它。

这是我的测试代码：

/* tslint:disable:no-unused-variable */
import { inject, addProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { TrackingDirective } from './tracking.directive';
import { TrackingService } from './tracking.service';

class MockTrackingService extends TrackingService {
  public eventCount = 0;

  public trackEvent(eventName: string) {
    this.eventCount++;
  }
}

describe('TrackingDirective', () => {
  let builder: TestComponentBuilder;
  let mockTrackingService: MockTrackingService;
  let trackingDirective: TrackingDirective;

  beforeEach(() => { …

在 Angular 中，我有一个服务，通过constructor(...). 然而，该服务也是在某个地方通过调用构造函数创建的。因此，在参数中添加它所依赖的另一个服务将会改变 API。我想避免这种情况。

有没有办法将一个服务注入另一个服务而不将其添加到构造函数参数中？例如现场注入？

import {Inject, Injectable} from "@angular/core";
import {
    Http, Request, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers,
    RequestMethod
} from "@angular/http";

import {KeycloakService} from "./keycloak.service";
import {Observable} from 'rxjs/Observable';
import {EventBusService} from "../events/event-bus.service";
import {LoadingSomethingFinishedEvent, LoadingSomethingStartedEvent} from "../events/windup-event";

@Injectable()
export class WindupHttpService extends Http {
    constructor(
        _backend: ConnectionBackend,
        _defaultOptions: RequestOptions,
        private _keycloakService: KeycloakService,
        // ----- This is what I want to avoid. -----
        private _eventBus: EventBusService,
    ) {
        super(_backend, _defaultOptions);
    }

    // -------  This is …

ConfigService在 angular 应用程序引导之前，我写了一篇文章来获取配置详细信息。

下面的代码写在app.module.ts这个代码工作正常，我能够在应用程序加载之前加载配置。

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...

但是，现在我想将有效负载传递给我必须从查询参数中读取的配置 API。

我尝试了以下但它抛出

...
@Injectable()
export class ConfigService {

    private _configData: any;

    constructor(
        private _http: Http,
        private _activatedRoute: ActivatedRoute
) {
}
...

如何读取 APP_INITIALIZER 服务中的查询参数？

我正在将 AgmMap 用于 angular 4 应用程序中的地图。如何在显示信息窗口的 agm-marker 中实现鼠标悬停事件。我需要在标记鼠标悬停时打开信息窗口。如何在我的函数 onMouseOver 中检索 infowindow 实例以打开它？这是我的 map.component.html 文件

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker *ngFor="let m of markers; let i = index"
          [latitude]="m.lat"
          [longitude]="m.lng"
          (markerClick)="clickedMarker(m, i)"
          [iconUrl]="m.iconUrl">
          <agm-info-window>{{m.label}}</agm-info-window>
  </agm-marker>
</agm-map>

和 map.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';
import { Ng4DropdownModule } from 'ng4-material-dropdown';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   moduleId: module.id,
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
}) …

我是 Angular 5 的新手，我想发送 http 请求，但它在检查元素中返回 CORS 错误。

错误

XMLHttpRequest 无法加载http://example.com/account/create。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:4200 ”。响应的 HTTP 状态代码为 403。

下面是我的代码：

postFormData(apiUrl: string, value: Object): Observable<any> {
const body = value;
const headers = new Headers();
const utcOffset = -(new Date().getTimezoneOffset());
headers.append('Content-Type', 'application/json');
headers.append('utc-offset', utcOffset.toString());
headers.append('platform', 'WEB');
headers.append('app-version', '1.00');
headers.append('version', '1.0');
headers.append('accept', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

if (localStorage.getItem('user')) {
  const user = JSON.parse(localStorage.getItem('user'));
  headers.append('token', user.token);
  headers.append('session', user.session);
}
// const options = new …

我对我的网站有很多信任，所以为了建立安全的路由，我建立了下一个守卫：

export class TrustGuard implements CanActivate {
    constructor(private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return /*Check if user has the trust or not*/;
    }
}

所以，在路线中，我可以添加像 canActivate: [TrustGuard]

问题是我有太多的信任，因此我需要为每个信任建立一个守卫。所以我试图建立一个警卫工厂，以避免实施太多类似的警卫。

我的目标是找到设置路线的方式 canActivate: [FactoryTrustGuard(Trust.seeDashboard)]

有可能吗？

如何通过 css 选择器在整个文档中找到元素，而不仅仅是在 Angular2 (ngx) 的子元素中？

目前正在使用高级 ui 框架（如版本 2 和 4 的角度）实现我的用户界面代码。

当我想将代码部署到服务器时，我需要通过发出以下命令“ ng build --prod ”来构建项目，因此正在生成许多块文件。

我想知道为什么会生成这些块文件。

我是角度的新手。我想知道如何将 JWPlayer 集成到我的 angular 4 项目中。我已经在 .angular-cli.json 中导入了 jwplayer.js 的 src。谢谢你。

我想在 angular 2 中将参数传递给 POST 方法，但它不起作用，因为我使用了params:new httpParams().set()但它不起作用。我也试过params:new httpParams().set() 和 headers然后它也不起作用 & 最后我得到了Formdata的解决方案