标签: angular2-services

看起来共享服务是解决许多情况的最佳实践,例如组件之间的通信或替换角度1的旧$ rootscopecope概念.我正在尝试创建我的,但它不起作用.有帮助吗？ty !!!

app.component.ts

import {Component} from 'angular2/core';
import {OtherComponent} from './other.component';
import {SharedService} from './services/shared.service';
@Component({
selector: 'my-app',
providers: [SharedService],
directives: [OtherComponent],
template: `
    <button (click)="setSharedValue()">Add value to Shared Service</button>
    <br><br>
    <other></other>
`
})
export class AppComponent { 
data: string = 'Testing data';
setSharedValue(){
    this._sharedService.insertData(this.data);
    this.data = '';
    console.log('Data sent');
}
constructor(private _sharedService: SharedService){}
}

other.component.ts

import {Component, OnInit} from "angular2/core";
import {SharedService} from './services/shared.service';
@Component({
selector : "other",
providers : [SharedService],
template : `
I'm the other component. …

我正在尝试构建自己的Modal组件,我可以在整个Angular2应用程序中重用它.我正在考虑不同的方法,我想知道是否有可能创建@Component它也作为@Injectable？我正在考虑这个,因为我想为Modal构建一个模板,并将其保存在一个地方.

谢谢

使用Javascript Infovis Toolkit作为绘制图形和树木的外部库.我需要操作节点的onClick方法,以便异步地向服务器发送HTTP GET请求,并将来自服务器的数据分配给Angular服务类的属性和变量.通过使用webpack将所有已编译的类型脚本打包到单个js文件中,输出文件令人困惑且无法读取.因此,从外部js库调用已编译的js文件中的函数并不是最好的解决方案.

我在Angular服务中尝试以下解决方案,以便我可以毫无困难地访问此服务的属性:

document.addEventListener('DOMContentLoaded', function () {
  
  var nodes = document.querySelectorAll(".nodes"); // nodes = []
  
  for (var i = 0; i < nodes.length; i++) { // nodes.length = 0
    
    nodes[i].addEventListener("click", function () {
      
      // asynchronously sending GET request to the server
      // and assing receiving data to the properties of this Angular service
      
    });
  }

});

但是,此解决方案不起作用,因为在Javascript Infovis Toolkit中,节点是在完成DOM渲染之后以及window.onload事件之后绘制的.这个库有一些生命周期方法,比如onAfterCompute(),它在绘图树完成后调用.如何触发全局事件以通知Angular服务树的绘制已完成并且它可以查询所有节点？

我花了一天时间与Angular2一起潜入RxJS,因为将用户界面建模为流的做法对我来说是新的.

我正在尝试提供User对象流的用户服务.User当用户通过身份验证时,将提供第一个对象.User当用户更新时可以提供附加对象,例如他们更新他们的简档.如果在应用程序加载时未记录用户,或者他们注销,则会null发出.

因此,组件中的观察器实现如下所示:

export class AppComponent {
  private user: User;
  private showLoginForm: boolean;
  constructor(public userService: UserService) { }
  ngOnInit() {
    this.userService.user$.subscribe(user => {
      this.user = user;
      this.showLoginForm = this.user ? false : true;
    })
  }
}

的userService.user$可观察到的是一个BehaviorSubject类型.这是你如何实现这个？发送null到期望User对象的流的想法并不适合我.但与此同时,它确实提供了回答问题的便捷方式:用户是否可用？

我正在尝试使用嵌套子组件中的按钮切换位于主App模板顶部的侧面导航菜单.我无法弄清楚如何到达父级中的sidenav组件来告诉它sidenav.open().

我知道子组件上的@Input和@Output,但据我所知,要使用它,我需要为子组件添加某种DOM标记来附加它们吗？如:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>

关于如何做到这一点的文章很多.问题是我正在路由到此组件,因此<child>代码中没有明确存在标记.相反,我的代码是这样的:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <router-outlet></router-outlet>
</app>

如果我有一个子组件被路由到,我该怎么做sidenav.open()或以某种方式访问​​孩子的父组件？

一些想法:我已经做了一些研究并思考了几种方法,并且不确定它们是否正确或甚至可以工作......一种方法是使用Injector服务并尝试遍历父母,但这感觉不对:

// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}

或者可能在父级中创建一个服务,以某种方式附加到Sidenav组件,然后将此服务注入到子级中？

我一直在关注本教程,了解延迟加载,下面是我的推断.

场景1:通过将它们放在providers子模块的数组中来提供服务

场景2:使用该forRoot方法在子模块中提供服务

方案1在上下文中,

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.
• 如果延迟加载子模块,则将服务的实例添加到根注入器,并将新服务实例添加到子注入器,这不是通常的用例.

在上下文中使用方案2

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.

• 如果延迟加载子模块,则在根模块和子模块中都可以使用相同的服务实例,这是通常的用例.

他们提到了以下内容.

一开始,

因此,即使使用模块,也无法拥有"私有"服务,除非......模块正在延迟加载.

最后,

尽管此语法比原始语法更复杂,但它将保证我们只将一个CreditCardService实例添加到根模块.加载CreditCardModule(甚至延迟加载)时,不会将该服务的新实例添加到子注入器.

如果实例也将在根注入器中可用,那么他们如何表示该服务被"私有化"？

我糊涂了.有人请澄清一下.

我正在使用EventEmitterAngular@Output服务，今天一位同事提到这不是一个好的做法。

我发现这篇文章提到这是一种不好的做法，而且似乎主要是个人意见，而这个答案提到使用它是可以的。我找不到任何关于它的官方文件，所以如果有人知道官方答案，请发布。

关于EventEmitter 的官方文档

有没有办法告诉服务器更新数据而无需订阅？跳过return语句和订阅似乎使http调用变为惰性.

在我的情况下,我的数据库人创建了一堆没有返回任何内容的存储过程,有时我想在我的服务中做这样简单的事情:

public setItem(item: IRequestItem) {
        this.http.post('api/items', item);
    }

并在我的组件中调用它:

save() {
        var comp = this;
        this.items.forEach(function(item) {
            comp.service.setItem(item)
        });
    }

相反,我必须在服务中做这样的事情:

public setItem(item: IRequestItem) {
        return this.http.post('api/items', item);
    }

然后在conponent中像这样调用它:

save() {
        var comp = this;
        this.items.forEach(function(item) {
            comp.service.setItem(item).subscribe(r => console.log(r));
        });
    }

哪个会返回很多这些:

Response {_body: "", status: 204, ok: true, statusText: "No Content", headers: Headers…}
_body : ""
headers : Headers
ok : true
status : 204
statusText : "No Content"
type : 2
url : "http://localhost:56018/api/items"
__proto__ …

我有以下配置对象,它在构造函数运行之前设置:

config: Object = {
     onSlideChangeEnd : function(slide:any) {
          this.currentSlideIndex = slide.activeIndex;
     }
};

我想通知服务有关更改,问题是在设置配置时服务还不可用:

 constructor(private user: UserService,
             private layout: LayoutService) {
 }

如何通过此变量更改通知服务？

我是 Angular2 的新手，并试图在app.component.spec.ts文件中编写一个测试。我的应用程序相对简单，除了它从 3rd 方库（由同事编写）导入 LoginComponent 和 LogoutComponent 之外。这些组件现在分别用于路由登录或注销，非常简单。运行ng serve编译正常，应用程序“平稳”运行。ng test然而，Running给了我这个错误：

NullInjectorError: StaticInjectorError(DynamicTestModule)[LogoutComponent -> SessionService]: 
  StaticInjectorError(Platform: core)[LogoutComponent -> SessionService]: 
    NullInjectorError: No provider for SessionService!

LogoutComponent 是从不同的项目导入的。此错误是否意味着我需要进入该项目并进行一些更改，还是应该在我的项目中以某种方式模拟 SessionService？

规格代码：

import {} from 'jasmine';
import {async, TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {AuthErrorStateService, LogoutComponent} from '@custom-library';

import {AppComponent} from './app.component';
import {AppErrorStateService} from './core/error-states/app-error-state.service';
import {TopNavComponent} from './core/top-nav/top-nav.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed
        .configureTestingModule({
          imports: [RouterTestingModule],
          providers: [
            AppErrorStateService, AuthErrorStateService
          ], …