遗留流星方法 angular2 UI 路由器问题 [英] Legacy Meteor Methods angular2 UI Router Issue

问题描述

https://github.com/faizmh/meteor_angular2_router_issues

我正在尝试从主页导航到市场页面.

I am trying to navigate from home page to market page.

在主页中，我尝试了不同的变体来过渡到市场页面

In home page, I tried different variations to transition to market page

我的目标市场页面，通过 Observables 使用 Meteor RPC 方法从数据库中读取

My target market page, reads from the db using Meteor RPC method via Observables

在遗留账户包和meteor方法的情况下，angular UI无法呈现数据

home.component.html

home page
<a [routerLink]="['/market']"> Market</a>
<button (click)="direct()">Direct Router</button>
<button (click)="accounts_package()">Using meteor accounts_package</button>
<button (click)="meteor_methods()">Using meteor Methods</button>
<button (click)="meteor_observable()">Using meteor meteor_observable</button>

home.component.ts

import { Component} from '@angular/core';
import template from './home.component.html';
import { Router, CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { MeteorObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';

@Component({
  selector: 'home',
  template
})
@Injectable()
export class HomeComponent {
    constructor(private router:Router){
    }
    direct(): void {
        console.log('calling direct')
      this.router.navigate(['market']);
      console.log(this.router)
    }

    meteor_observable(): void {     
        console.log('calling meteor_observable')
        let router = this.router
        MeteorObservable.call('logout').subscribe((markets) => {
      router.navigate(['market']);
    }, (error) => {
      console.log(`Failed to receive market_filter due to ${error}`);
    });
    }
    accounts_package(): void {
        console.log('calling accounts_package')
        let router = this.router
        Meteor.logout(function(){       
        router.navigate(['market']);
      });
    }

    meteor_methods(): void {
        console.log('calling meteor_methods')
        Meteor.call('logout', (error,result) => {
            this.router.navigate(['market']);
        })
    }
}

ma​​rket.component.ts

import { Component} from '@angular/core';

import template from './market.component.html';
import { MeteorObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';

@Component({
  selector: 'market',
  template,
})
export class MarketComponent  {
  private markets

  constructor() {
    MeteorObservable.call('market_filter').subscribe((markets) => {
      this.markets = markets
    }, (error) => {
      console.log(`Failed to receive market_filter due to ${error}`);
    });

  }
}

ma​​rket.component.html

Markets are {{markets}}

推荐答案

实际上这里的主要问题是我们同时使用 angular 2 和meteor 并且两者在不同的区域.因此 angular 不会检测到其区域之外的变化.您可以使用此方法解决此问题.

Actually here main problem is we are using angular 2 and meteor together and both are in different zones. so angular don't detect change which are outside of its zone.you can solve this problem using this method.

import { NgZone } from '@angular/core';

在你的构造函数类型中使用这个

in you constructor type use this

constructor(private ngZone: NgZone) {}

并像这样使用 ngZone 您想通过角度检测的值

and use ngZone like this which values you want to detect by angular

  generate_head_list_data(){
        var self = this;
         Meteor.call('refresh_graph_list', self.all_csvdata, self.newGraphdata, (error, response) => {
                if (error) {
                    console.log(error.reason);
                    self.ngZone.run(() => { <-- put you code inside ngZone in which you are getting issue in rendering
                        self.processingStart = false;
                    });
                } else {
                    self.ngZone.run(() => {
                        self.processingStart = false;
                        self._router.navigate(['/login']);
                    });
                    console.log(response);
                }
            });
    }

我希望这会有所帮助.

这篇关于遗留流星方法 angular2 UI 路由器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！