标签: angular2-services

我正在学习Angular 2,尝试从(可能非常大的)第三方API构建可扩展的树视图.API有一个这样的底层结构:

- Home (id: 1053)
- - Rugby League (id: 1054)
- - - Super League (id: 1103)
- - - - Castleford Tigers (id: 1111)
- - - - Catalans Dragons (id: 1110)
- - - - Huddersfield Giants (id: 1116)
- - - - Hull FC (id: 1108)
- - - Championship (id: 1104)
- - - - Batley Bulldogs (id: 1120)
- - - - Bradford Bulls (id: 1118)
- - - - Dewsbury Rams (id: …

我的问题是这里对另一个问题的扩展:Angular2和类继承支持

这是我的蠢货:http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ？p =preview

我想要做的是以下内容:

我有一些常见的功能,我的所有组件都必须使用.正如在上述问题中已经回答的那样,这可以做到.

我的问题是:我可以在基础组件中注入依赖项吗？在我的plunkr中,声明的dependency(FormBuilder)在登录到控制台时是未定义的.

import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';



@Component({
  providers: [FormBuilder]
})
export class BaseComponent {
  // Interesting stuff here
  @Input() id: string;

  constructor(formBuilder: FormBuilder){
    console.log(formBuilder);
    console.log('inside the constructor');
  }


}

@Component({
  selector: 'child-comp2',
  template: '<div>child component #2 ({{id}})</div>',
  providers: [provide(BaseComponent, { useExisting: forwardRef(() => ChildComponent2) })]
})
export class ChildComponent2 extends BaseComponent {


}

@Component({ …

Angular 2.0 rc 5,路由器版本3.0.0 rc1

我有一个角度2应用程序,它使用服务在组件之间进行通信,一个父组件具有一个<router-outlet>和一个具有routerLinks的子组件.我正在使用NgClass来更新动画的css类.我添加了服务,以便在我点击其中一个路由器链接时更新NgClass,以及更改<router-outlet>输出.但是,我只能在点击routerLinks两次后才能更新NgClass.单击相同的routerLink或不同的routerLink并不重要,只要它点击两次订阅更新.

页面行为gif

我的父组件的.ts:

import {Component} from '@angular/core';
import {NgClass} from '@angular/common';
import {NavService} from 'components/nav.service';
import {Subscription} from 'rxjs/Subscription';
import {ButtonComponent} from 'components/button.component';
import {MenuComponent} from 'components/menu.component';
import {CardContainerComponent} from 'components/cardcontainer.component';

@Component({
    selector: 'juan',
    templateUrl: 'app/components/app.component.html',
    directives: [ NgClass ,ButtonComponent, MenuComponent, CardContainerComponent],
    providers: [NavService]
})
export class AppComponent {
    isPushed = false;
    subscription: Subscription;
    public initiatePush(){
        this.isPushed = !this.isPushed;
    }
    constructor(private navService: NavService){
        this.subscription = this. navService.navToggle$.subscribe(
            isPushed => {
                this.isPushed …

有些模块公开了他们的服务配置,例如:

• AngularFireModule.initializeApp(firebaseConfig),
• StoreModule.provideStore(reducer),
• RouterModule.forRoot(routes)...

我如何在运行时重新配置其中一个？例如,用户选择两个链接中的一个,并且不同的模块是延迟加载和配置不同的......如何将数据传递给这个新的NgModule？

我能想到的只是把一些东西放在全球范围内并从那里读取,但......感觉不对:)

我有一个使用角度2的设计,其中所有其他组件加载的标题组件,导航栏组件和主体组件.如下图所示

1. 头
2. 导航
3. 其他组件加载的位置(此部分可能具有嵌套组件/子组件)

所以基本上,在标题组件中,我想显示当前状态.并且在当前状态的底部,我想显示用户的先前状态.

问题:为了实现这一点,我在角度中使用了组件交互技术.

• 重新加载应用后,它会显示当前和
  后退状态的默认值.

• 在用户直接登陆到正文中的子组件的特定页面的场景中,它显示当前和后退状态的默认值.

由于angular遵循组件架构,因此我想要一种更好的方法来实现此功能.

如果我直接进入图片中第3部分的子组件,我的标题组件应根据标题组件中的特定页面获取标题/当前状态.

当ngOnInit I传递当前状态值时,我的解决方案是在每个组件中.我也解析以前的状态值.因此,标头组件显示它,因为服务是使用此链接中的技术编写的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是有些情况下我从服务器获取数据并且必须更新标头当前状态.在那里,我看到根本没有显示.

需要帮助以获得良好的解决方案

PS - 由于这种机制在不同的文件中,并且有点复杂,我无法更新代码模板

这是一个可以玩的玩家:

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

一切都运行良好,除非您手动更改网址栏中的id参数,因为项目下拉列表不会将新projectId显示为当前项目.当用户将网址保存为收藏链接并将其复制/粘贴到网址栏时,会发生这种情况!我会说一个常见的情况!

为了解决这个问题,我可以收听route.params中的更改TestsListComponent并添加一个检查,sharedService/EventEmitter其中更改的ID存在于该下拉列表中.TestsListComponent中的bool返回值existsProjectId决定我应该重定向到/projects页面,因为id不存在.

但老实说,TestsListComponent至少从用户体验的角度来看,重定向是太迟了,因为route projects/:id/tests它已经被激活了.

你会如何解决这种不端行为？

PS

• 也许有一种全局参数更改我可以听,并检查ProjectsListComponent中的路径及其ID,这将有所帮助!

• 如果有人知道如何在窗口模式下编辑plunkr的url栏来测试这种不一致性,请告诉我你是如何使readonly url bar可编辑的...即使将url复制到新的选项卡也不行,因为我得到了一个plunkr找不到错误... => 答案

  1. 加载plunkr并激活窗口模式
  2. 在窗口模式下,将URL复制/粘贴到新选项卡中
  3. 当这是粘贴的URL:https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
  4. 设为网址:https: //run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
  5. 并改变参数:https: //run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
  6. 如果你不添加哈希,那么你得到一个未找到的404.

我搜索了许多论坛,问题,在doc但找不到正确的解决方案.

问题

使用angularfire2增加值的最佳方法是什么？
我看到我们可以使用[transaction()] []但实际上并不适用于angularfire2.还是快照？

user.service.ts

incrementLike(userToIncrementLike){
    this.af.database.object('users/' + userToIncrementLike.uid).subscribe((userObject) => {
      var newUser = {
        likes: userObject.likes + 1
        };

     });
     this.af.database.object('users/' + userToIncrementLike.uid).update(newUser);

  }

我也试过这种方式:

incrementLike(userToIncrementLike){

    let obs = this.af.database.object('users/' + userToIncrementLike.uid);
    obs.subscribe((snapshot) => {
      let newValue = (snapshot.$value) ? (snapshot.$value + 1) : 1;
      obs.set(newValue);
    });
  }

非常感谢你的帮助和提示:)路易斯.

我已经学习了角度2几周.我有点困惑一件事.请比较这里存储/共享数据的方式:

https://github.com/Apress/pro-angular-2ed/blob/master/Angular%202.0/08%20-%20SportsStore%20-%20Orders%20and%20Checkout/SportsStore/app/model/product.repository. TS

和这里:

https://github.com/gothinkster/angular2-realworld-example-app/blob/master/src/app/shared/services/comments.service.ts

第一个链接显示了Adam Freeman的书"Pro Angular"中是如何完成的.我们可以看到有一个名为ProductRepository的服务,那就是存储所有产品的地方.这个服务有一个构造函数,它从另一个服务初始化它的数据,称为StaticDataSource(书中的后面更改为从其余的api获取数据).总而言之:我们有一个组件,它会注入一个名为ProductRepository的服务.然后它使用此服务中的getProducts()方法来接收所有产品(实际上它们只是存储在该服务的数组中).

现在让我们看看第二个链接:

在这里,我们有一个CommentsService.这次数据不存储在此服务中.我们只使用名为getComments()的方法,该方法又从api服务执行另一种方法.总结一下:我们有一个组件(ArticleComponent),它会注入CommentsService.然后它在该服务上调用getComments(),实际上每次调用时都会向服务器发送一个http.get请求.

现在我的问题是这些方法与后果之间的区别.据我所知,在第一种情况下,所有数据仅从服务器获取一次(当应用程序加载时),然后将其全部存储在名为SomethingRepository(ProductRepository等)的服务中.然而,在第二个链接中,每次我们使用服务(在任何组件中),我们都直接从服务器接收数据.

它的最佳实践是什么？我只是担心,如果我们使用书中提出的方法,那么我们不会总是获得"最新鲜"的可能数据,因为如果另一个客户在此期间改变了某些东西,那么我们仍然处理我们下载时下载的数据应用正在加载.另一方面,第二种方法可能会影响我们在组件之间共享数据的可能性.

我真的对此感到困惑,我不确定我是否应该将整个模型保留在我的应用程序中并拥有某种存储库,或者第二种方法可能更好.感谢您的任何帮助.

我在service.ts中有一个方法getData(),如下所示.这将返回一个Observable.另一个服务ApiService也有一个方法get(),它也返回一个Observable.

    getData(args, parentKey?):any {
        return new Observable(observer => {
            this.apiService.get(args).subscribe(
                response => {
                    observer.next({
                        data: response['data'],
                        status: ($.isEmptyObject(response) ? false : true) 
                    });
                },
                error => console.log("error : ", error),
                () => console.log("finished")
            );
        });
    }

我试图在我的组件的异步 API调用中重用此getData()方法.见下文:

this.myService.getData({
    url: 'apiUrl1',
    method: 'Method1',
    parameters: {}
}).subscribe(response => {
    if (response['status']) {
        console.log('Processed apiUrl1');
    }
});
this.myService.getData({
    url: 'apiUrl2',
    method: 'Method2',
    parameters: {}
}).subscribe(response => {
    if (response['status']) {
        console.log('Processed apiUrl2');
    }
});
this.myService.getData({ …

在我使用Promises进行服务调用之前,我正在研究Angular2/4中的Observables.

我想知道进行多个同步调用的最佳方法是什么.让我用一个例子来解释一下:我的app组件有一个getUserInfo()方法,它需要对3个不同的服务进行3次调用,这些服务相互依赖.

getUserId():Number // return the logged in user userId from the session
getUserPermissions(userId):Array<String> // return a list of permission from the userId
getUserInfo(userId):String // return some additional info for the user

现在让我假设我有一个User对象如下:

export class User {
id: number;
name: string;
info: string;
permissions: array<string>;
}

我需要使用3个服务调用的结果创建一个User类的新实例,所以我需要运行:

1. getUserId();
2. getUserPermissions();
3. getUserInfo();

通过Observable实现这一目标的最佳和最礼貌的方法是什么？

有了承诺,我会有这样的事情:

this._service.getUserId().then(r1 => {
  let userId: number = r1;
  this._service.getUserPermissions(userId).then(r2 => {
    let userPermissions: Array<String> = r2;
    this._service.getUserInfo(userId).then(r3 => {
      let userInfo: string = r3;
      let user: User = …