Question

实现此目标的最佳方法是什么，执行此操作时会出错：

“不能将'DocumentaryResolverService'类型的属性'resolve'分配给基本类型'Resolve'的相同属性。”

import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
  constructor(private documentaryService: DocumentaryService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let slug = route.params['slug'];
    let documentary: Documentary;
    return this.documentaryService.get(slug).subscribe(result => {
        documentary = <Documentary> result;
        return documentary;
    });
  }
}

但是，如果这样做，我不会收到任何错误，但我想等到对observable的订阅完成后再返回纪录片。

import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
  constructor(private documentaryService: DocumentaryService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let slug = route.params['slug'];
    let documentary: Documentary;
    this.documentaryService.get(slug).subscribe(result => {
        documentary = <Documentary> result;
    });
    return documentary;
  }
}

我尝试使用异步并等待来执行此操作，但这不起作用

import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
  constructor(private documentaryService: DocumentaryService) {}

  async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let slug = route.params['slug'];
    console.log(slug);
    console.log("resolver");
    let documentary: Documentary;
    await this.documentaryService.get(slug).subscribe(result => {
        return <Documentary> result;
    });
    return documentary;
  }
}

解析器在这里称为：

import { DocumentaryService } from './../../../services/documentary.service';
import { Documentary } from './../../../models/documentary.model';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-admin-documentary-detail',
  templateUrl: './admin-documentary-detail.component.html',
  styleUrls: ['./admin-documentary-detail.component.css']
})
export class AdminDocumentaryDetailComponent implements OnInit, OnDestroy {
  documentary: any;
  slug: string;
  documentarySubscription: Subscription;

  constructor(
    private documentaryService: DocumentaryService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.documentary = data;
      console.log(this.route.data);
    })
    }

    ngOnDestroy() {
      this.documentarySubscription.unsubscribe();
    }
}

Answer 1

一旦订阅该服务然后返回数据，它就不再是Observable，您将返回一个Subscription类型的对象。您的“解决”功能必须产生纪录片，Observale <纪录片>或Promise <纪录片>。

代替订阅，只需返回Observable，

"references.preferredLocation": "view",

以下是带有示例的Resolver API： https://angular.io/api/router/Resolve

Answer 2

要获取解析数据，您需要将其添加到AdminDocumentaryDetailComponent路由中

const routes: Routes = [
  {
    path: '',
    component: AdminDocumentaryDetailComponent,
    resolve: {
       documentary: DocumentaryResolverService
    }
  }
];

我如何订阅并与Resolver Service的数据保持同步

2 个答案: