首页 文章

Route Resolver没有订阅就不会触发observable

提问于
浏览
0

在路由加载之前,我有一条需要来自Firebase数据库的数据的路由 . 感觉就像Route没有调用subscribe所以请求永远不会被触发 . 我错过了一步吗?

(Angular 5)

我的路由器:

{
  path: 'class/:idName',
  component: ClassComponent,
  resolve: {
    classData: ClassResolver
  }
},

我的解析器:

@Injectable()
export class ClassResolver implements Resolve<any> {

    constructor(
        private db: AngularFireDatabase
    ) {}

    resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
        // return 'some data'; //This worked fine
        return this.db
           .list('/')
           .valueChanges() // Returns Observable, I confirmed this. 
           //.subscribe(); // This returns a Subscriber object if I call it and I never get any data
    }

    // I tried this and it didnt work either
    //const list = this.db
    //        .list('/')
    //        .valueChanges();
    //console.log('list', list);  // Is a Observable
    //list.subscribe(data => {
    //    console.log('data', data); // returned data
    //    return data;
    //});
    //return list; // never gets to the component
}

我的组件:

public idName: string;
// Other vars

constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private db: AngularFireDatabase
) {
    // Form stuff    
}

ngOnInit() {
    // Never makes it here
    this.idName = this.route.snapshot.params.idName;
    const myclass = this.route.snapshot.data.classData;
    console.log('myclass', myclass);
}

我从来没有进入组件 . 它等待组件加载,它从来没有 . 如果我添加subscribe和console.out数据,它会很快返回正确的数据,所以它不是服务 .

======

编辑:

在我的解析器中调用 .subscribe() 之后,现在返回一个 Subscriber 对象 . 因为我的返回签名允许 any 返回此 Subscriber ,好像它是数据一样 . 这看起来很明显 .

我的问题现在变成为什么不解决我的Observable?

更新了上面的 Headers 和文字

======

已解决:

我发现这个问题(https://github.com/angular/angularfire2/issues/624)显然这是我正在使用的firebase库中的一个问题 . 他们的观察者并没有被这些路线解雇 . 它是在2016年提出的,仍然是一个问题 . 我不认为它会被修复 .

我找到的解决方法是这样的

resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    return this.db
            .list('/', ref => ref.orderByChild('idName').equalTo(route.params.idName))
            .valueChanges()
            .first();
}

1 回答

  • 1

    您的代码看起来是正确的 . 你有没有把参数传递给你的 class 路线?如果没有参数,它就无法解决,这可能就是您没有达到ngOnInit函数的原因 . 我建议控制台记录你的路线快照,以确保你 grab 正确的对象 . 我还会发布一个我工作的解决方案示例:

    Component.ts

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
    
      public data: Observable<any>;
    
      constructor(private router: ActivatedRoute) { }
    
      ngOnInit() {
        this.data = this.router.snapshot.data.test;
      }
    }
    

    Routing.ts

    { path: 'home/:id', component: HomeComponent, resolve: { test: ResolverService } },
    

    ResolverService

    import { Injectable } from '@angular/core';
    import { Resolve } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/observable/of';
    
    @Injectable()
    export class ResolverService implements Resolve<Observable<any>> {
    
      constructor() { }
    
      public resolve(route: ActivateRouteSnapShot): Observable<any> {
        return Observable.of({test: 'Test Observable'});
      }
    }
    

    HTML

    {{this.data.test}}
    

相关问题