类型“数据”缺少类型中的以下属性

Question

我是 Angular 8 的新手，想知道为什么会出现此错误，如果您发现编写以下代码的更好方法，请随时给我提示。

“数据”类型缺少“纪录片”类型的以下属性：id、> 标题、slug、故事情节等 13 个。

错误出现在 AdminDocumentaryEditComponent

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

数据服务

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private url: string, private http: HttpClient) { }

  get(slug) {
    return this.http.get(this.url + '/' + slug);
  }

  getAll(params:HttpParams) {
    return this.http.get<Object[]>(this.url, 
    {
      params: params
    });
  }

  create(resource) {
    return this.http.post(this.url, JSON.stringify(resource));
  }

  update(resource) {
    return this.http.put(this.url + '/' + resource.id, JSON.stringify({

    }));
  }

  delete(id: number) {
    return this.http.delete(this.url + '/' + id);
  }
}

纪录片服务

import { HttpClient } from '@angular/common/http';
import { DataService } from './data.service';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DocumentaryService extends DataService {

  constructor(http: HttpClient) {
    super('http://localhost:8000/api/v1/documentary', http);
   }
}

DocumentaryResolverService

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 = this.documentaryService.get(slug)[0];
    return Object.assign(new Documentary(), documentary);
  }
}

AdminDocumentaryEditComponent

import { Documentary } from './../../../models/documentary.model';
import { DocumentaryService } from './../../../services/documentary.service';
import { Params, ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'app-admin-documentary-edit',
  templateUrl: './admin-documentary-edit.component.html',
  styleUrls: ['./admin-documentary-edit.component.css']
})
export class AdminDocumentaryEditComponent implements OnInit {
  documentary: Documentary;
  editDocumentaryForm: FormGroup;

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

  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    uploadUrl: 'v1/images', // if needed
  };

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

  initForm() {
    let title = this.documentary.title;
    let slug = this.documentary.slug;
    let storyline = this.documentary.storyline;
    let summary = this.documentary.summary;
    let year = this.documentary.year;
    let length = this.documentary.length;
    let status = this.documentary.status;
    let short_url = this.documentary.short_url;
    let poster = this.documentary.poster;

    this.editDocumentaryForm = new FormGroup({
      'title': new FormControl(title, [Validators.required]),
      'slug': new FormControl(slug, [Validators.required]),
      'storyline': new FormControl(storyline, [Validators.required]),
      'summary': new FormControl(summary, [Validators.required]),
      'year': new FormControl(year, [Validators.required]),
      'length': new FormControl(length, [Validators.required]),
      'status': new FormControl(status, [Validators.required]),
      'short_url': new FormControl(short_url, [Validators.required]),
      'poster': new FormControl(poster, [Validators.required])
    });

    this.editDocumentaryForm.statusChanges.subscribe(
      (status) => console.log(status)
    );
  }

  onFileChange(event) {
    let reader = new FileReader();

  if(event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    reader.readAsDataURL(file);

    reader.onload = () => {
      this.editDocumentaryForm.patchValue({
        poster: reader.result
      });

      // need to run CD since file load runs outside of zone
      this.cd.markForCheck();
    };
  }
  }

  onSubmit() {
    console.log(this.editDocumentaryForm);
  }
}

Answer 1

在路由中确保使用相同名称“数据”命名解析器：

 { path: 'somepath', component: AdminDocumentaryEditComponent, resolve: { data: DocumentaryResolverService} }