遗留Meteor方法angular2 UI路由器问题

我试图从主页导航到市场页面

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

我的目标市场页面，使用Meteor RPC方法通过可观测数据读取数据库

对于遗留帐户包和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>

Markets are {{markets}}

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

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

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>

Markets are {{markets}}

---

实际上这里的主要问题是我们把angular 2和meteor放在一起使用，它们都在不同的区域。因此，角度传感器不会检测到超出其区域的变化。您可以使用此方法解决此问题

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

在您的构造函数类型中，请使用

constructor(private ngZone: NgZone) {}

使用像这样的ngZone，它的值要通过角度来检测

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

generate_head_list_data（）{
var self=这个；
Meteor.call（'refresh\u graph\u list'，self.all\u csvdata，self.newGraphdata，（错误，响应）=>{
如果（错误）{
console.log（错误原因）；
self.ngZone.run（（）=>{{
self.processingStart=false；
self._router.navigate（['/login']）；
});
控制台日志（响应）；
}
});
}

---

我希望这会有所帮助。

我们需要更多的代码。显示有效的代码没有帮助。向我们显示您的路线，甚至可能是模板。