标签: angular2-services

我有一个常量文件

export class constants {
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }
}

我将它导入我的服务

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

如何通过服务器更改来更改endpont.我有开发服务器登台服务器和本地服务器.我希望应用程序检测环境变化.

在我的角度1应用程序中,我使用了envserviceprovider.我可以在角度2应用程序中使用相同的吗？

我有新的发展角度4.我已经面临的问题,同时获得约显示器image.In API API响应,图像文件的输入流文件,我不知道该如何找回它并正确显示.

你能解决吗？

我试过这个:

• Image.Component.ts:

  this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
           .subscribe((response) => { var blob = new Blob([response.text()], {type: "image/png"});
             console.log(blob);
             console.log(window.btoa(blob.toString()));           
  });
  

  Run Code Online (Sandbox Code Playgroud)

结果=> W29iamVjdCBCbG9iXQ==,但格式不正确

并尝试了这个:

this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769').map(Image=>Image.text())
  .subscribe(data => {
    console.log((data.toString()));   
});

像这样的结果=>

 ????\ExifII*??7                                                      ??DuckyK??fhttp://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmpMM:OriginalDocumentID="xmp.did:0280117407206811A2188F30B3BD015B" xmpMM:DocumentID="xmp.did:E2C71E85399511E7A5719C5BBD3DDB73" xmpMM:InstanceID="xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73" xmp:CreatorTool="Adobe Photoshop CC 2014 (Windows)"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93" stRef:documentID="adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8"/> <dc:rights> <rdf:Alt> <rdf:li xml:lang="x-default">                                                      </rdf:li> </rdf:Alt> </dc:rights> <dc:creator> <rdf:Seq/> </dc:creator> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>???Photoshop 3.08BIMJZ%Gt6                                                      8BIM%?<".}???z?????Adobed???? …

我试图将配置数据传递到Angular中的自定义库.

在用户应用程序中,他们将使用一些配置数据传递给我的库forRoot

// Import custom library
import { SampleModule, SampleService } from 'custom-library';
...

// User provides their config
const CustomConfig = {
  url: 'some_value',
  key: 'some_value',
  secret: 'some_value',
  API: 'some_value'
  version: 'some_value'
};

@NgModule({
  declarations: [...],
  imports: [
    // User config passed in here
    SampleModule.forRoot(CustomConfig),
    ...
  ],
  providers: [
    SampleService
  ]
})
export class AppModule {}

在我的自定义库中,特别是index.ts,我可以访问配置数据:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SampleService } from './src/sample.service';
...

@NgModule({
  imports: [ …

我正在尝试使用withCredentials将cookie发送到我的服务但无法找到如何实现它.文档说"如果服务器需要用户凭据,我们将在请求标头中启用它们"没有示例.我尝试了几种不同的方法,但它仍然不会发送我的cookie.到目前为止,这是我的代码.

private systemConnect(token) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('X-CSRF-Token', token.token);
    let options = new RequestOptions({ headers: headers });
    this.http.post(this.connectUrl, { withCredentials: true }, options).map(res => res.json())
    .subscribe(uid => {
        console.log(uid);
    });
}

我试图从我的一个模块导出服务,但我只得到以下错误:

ERROR Error: Uncaught (in promise): 
Error: Can't export value ConfirmDialogService from SharedModule as it was neither declared nor imported!

我的模块如下:

import { NgModule }                 from "@angular/core";
import { CommonModule }             from "@angular/common";
import { FormsModule }              from "@angular/forms";
import { RouterModule }             from "@angular/router";
import { MaterialModule }           from "@angular/material";

import { ConfirmDialogComponent }       from './confirm-dialog/confirm-dialog.component';
import { ConfirmDialogService }         from './confirm-dialog/confirm-dialog.service';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        MaterialModule,
        FormsModule
    ],
    providers: [
        ConfirmDialogService
    ],
    declarations: [
        ConfirmDialogComponent 
    ],
    exports: …

在我的应用程序中,我有两个不同的bootstrap模块(@NgModule)在一个应用程序中独立运行.没有一个角度app位单独的bootstrap模块,现在我希望他们应该相互通信并共享数据.

我知道通过@Injectable服务作为模块中的提供者,我可以在所有组件下共享数据,@NgModule但是我将如何在两个不同模块(不是模块内部组件)之间共享数据.

有没有办法在另一个模块中访问一个服务对象？有没有办法可以访问浏览器内存中可用的服务对象并在我的其他角度模块中使用它？

我正在尝试从服务变量(isSidebarVisible)获取更新的值,该变量值由另一个组件(header)通过click事件(toggleSidebar)继续更新.

sidebar.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor()  {
        this.isSidebarVisible = false;
    }

    toggleSidebarVisibilty() {
        this.isSidebarVisible = !this.isSidebarVisible
        this.sidebarVisibilityChange.next(this.isSidebarVisible);
    }
}

sidebar.component.ts

export class SidebarComponent implements OnInit {
    asideVisible: boolean;
    _asideSubscription: any;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible
        this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
            this.asideVisible = value
        })
    }

    ngOnInit() {
    }
}

header.component.ts(更新服务变量的位置)

export …

我刚刚遇到一个延迟加载模块的问题,其中父模块和子模块都需要相同的服务但​​每个都创建一个实例.声明对两者都是相同的,即

import { MyService } from './my.service';
...
@NgModule({
   ...
   providers: [
      MyService,
      ...
   ]
});

这是路由设置

export parentRoutes: Routes = [
   { path: ':id', component: ParentComponent, children: [
      { path: '', component: ParentDetailsComponent },
      { path: 'child', loadChildren: 'app/child.module#ChildModule' },
      ...
   ]}
];

当然,然后将其导入父模块中

RouterModule.forChild(parentRoutes)

如果我想共享相同的服务实例,我该怎么做呢？

我试图找出如何让菜单显示和消失基于在以前的帖子中登录.但我认为一个更好也可能更容易的问题是,如何观察本地存储的变化？

我在本地存储中使用json web令牌进行身份验证,我很乐意看到对localStorage的更改,然后重新更新我对新信息的看法.

我用这个设置了localStorage

localStorage.setItem('jwt', my_token);

我想做的事情是检查我是否有令牌,如果我什么都没有发生,但是当发生变化时会发生事件.如果我只能观察像localStorage.getItem('jwt')这样的命名事件,我会特别喜欢它.

谢谢!

编辑:

Gunter指出了我正确的方向,但万一有人仍然相当困惑,这里有一个吸引人向你展示如何做到这一点. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

我有一个对象,我想在我的组件之间共享一个Angular2应用程序.

这是第一个组件的来源:

/* app.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.html',
    directives: [Grid],
    providers: [ConfigService]
})
export class AppComponent {
    public size: number;
    public square: number;

    constructor(_configService: ConfigService) {
        this.size = 16;
        this.square = Math.sqrt(this.size);

        // Here I call the service to put my data
        _configService.setOption('size', this.size);
        _configService.setOption('square', this.square);
    }
}

和第二部分:

/* grid.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'grid',
    templateUrl: 'app/templates/grid.html',
    providers: [ConfigService]
})
export class Grid {
    public config; …