传统流星方法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

对于传统帐户包和流星方法，角度用户界面无法呈现数据

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']);
        })
    }
}

market.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}`);
    });

  }
}

market.component.html

Markets are {{markets}}

推荐答案

实际上，这里的主要问题是我们一起使用了angular 2和流星，并且两者都位于不同的区域.因此，角度不会检测到其区域外的变化.您可以使用此方法解决此问题.

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屋！