小编Cla*_*onK的帖子

RxJS - .subscribe()vs .publish().connect()

这主要是RxJs的最佳实践/方法问题,因为我的POC代码有效,但我对RxJs来说是全新的.

问题归结为.subscribe()vs .publish().connect(),因为他们似乎都做同样的事情.

在我的angular2应用程序中,我有一个按钮,它调用一个函数来记录用户,该函数在我的服务中调用一个执行某些服务器端操作的函数,并返回一个URL以将用户重定向到.为了启动请求,我调用.subscribe()以使observable开始生成值.我正在阅读一篇关于"冷与热可观测量"的文章,另一种方法是打电话.publish().connect()而不是.subscribe().两种方法都有任何好处.

<a (click)="logout()">Logout</a>
Run Code Online (Sandbox Code Playgroud)

注销功能如下所示:

logout.component.ts

logout() { this.authService.logout(); }
Run Code Online (Sandbox Code Playgroud)

服务(实际注销)如下所示:

auth.service.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .subscribe();    // Option A - 

        return Observable.of(true);

    }
Run Code Online (Sandbox Code Playgroud)

auth.service.alternative.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .publish()  // Option B - Make connectable observable
            .connect(); // Option B - Cause the connectable observable to …
Run Code Online (Sandbox Code Playgroud)

rxjs rxjs5 angular

19
推荐指数
2
解决办法
8766
查看次数

Angular2 - 指令不更新模型

我有一个包含数字值的html输入框的指令.当用户将数字粘贴到文本框中时,我有一个"清理"数字的指令(剥离逗号,美元符号等).清洁代码似乎工作正常,但即使文本框显示清理后的值,我的模型也没有使用清理后的值更新.

如何使用新值更新模型?

Plnkr在这里

这是一个精简的例子:

app.ts

    @Component(
@Component({
  selector : 'my-app',
  template : `
  <div>
    <br/>
    <br/>
    <p>Stack Overflow person - give focus to text box and then lose focus by clicking elsewhere in the screen. <br/>The model is not updated.</p>
    <br/>Model value: {{ balanceAmount }}
    <br/>
    <br/>
    <input type="text" [(ngModel)]="balanceAmount" myCurrencyFormatter  /><br/>
  </div>
  `,
})
export class App {
  name:string;
  constructor(private mycurpipe: MyCurrencyPipe) {
    this.balanceAmount = 1234567.89;
  }
}
Run Code Online (Sandbox Code Playgroud)

货币格式化,Directive.ts

@Directive({ selector: "[myCurrencyFormatter]" })
export class MyCurrencyFormatterDirective implements OnInit { …
Run Code Online (Sandbox Code Playgroud)

angular2-directives angular

5
推荐指数
1
解决办法
3664
查看次数

标签 统计

angular ×2

angular2-directives ×1

rxjs ×1

rxjs5 ×1