Question

https://github.com/faizmh/meteor_angular2_router_issues

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

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

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

对于旧版帐户包和流星方法，角度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']);
        })
    }
}

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

Answer 1

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

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

构造函数类型中的

使用此

constructor(private ngZone: NgZone) {}

并使用像这样的ngZone，你希望通过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路由器问题

1 个答案: