Вход в дочерний компонент дает ошибку, но иногда загружается

Question

У меня есть объект, который я передаю от родительского компонента к дочернему компоненту. Когда я запускаю ng serve, я получаю сообщение об ошибке, что переданный объект не может быть найден. Тем не менее, если я сохраню файл, система будет периодически перезапускать сборку и строить правильно и обслуживать приложение. Объект действительно работает правильно.

Я полагаю, что причина связана с тем фактом, что данные, которые я передаю, поступают из службы извлечения данных. Если это правда, что я могу с этим поделать?

Родительский компонент:

@Component({
  selector: 'app-design-studio',
  templateUrl: './design-studio.component.html',
  styleUrls: ['./design-studio.component.scss']
})
export class DesignStudioComponent implements AfterViewInit {

  designData: any;

  // Private
  private _unsubscribeAll: Subject<any>;

  constructor(private _studio: DesignStudioService) { 
    // Set the defaults
    this.searchInput = new FormControl('');

    // Set the private defaults
    this._unsubscribeAll = new Subject();

    this._studio.onDesignChanged
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(response => {
          this.designData = response;

          // Prepend and append the cost and menu data
          this.designData.menu.unshift(this.projectMenu);
          this.designData.menu.push(this.costMenu);

          // Add the array to hide/show the side menus
          this.designData.menuShow = [];
          this.designData.menu.forEach((value, index) => {
            this.designData.menuShow[index] =  false;
          });
       });
  }

  ngOnInit() {
    this._studio.onDesignChanged
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(response => {
          this.designData = response;

          // Prepend and append the cost and menu data
          this.designData.menu.unshift(this.projectMenu);
          this.designData.menu.push(this.costMenu);

        // Add the array to hide/show the side menus
        this.designData.menuShow = [];
        this.designData.menu.forEach((value, index) => {
          this.designData.menuShow[index] =  false;
        });
      });
  }
}

Дочерний компонент:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'design-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  //designData: any;
  @Input() designData: designData;

  constructor() { }

  ngOnInit(): void {
  }
}

Ошибка дочернего компонента: ( секунда designData подчеркнуто по ошибке)

ERROR in src/app/main/design-studio/sidebar/sidebar.component.ts:12:22 - error TS2304: Cannot find name 'designData'.

    @Input() designData: designData;

Answer 1

Измените подчеркнутый интерфейс на any, так же, как у вас в родительском компоненте, это должно решить вашу проблему.

Также, глядя на код, пара моментов:

• У вас есть дублированный код (возможно, потому что это WIP) в конструкторе и в ngOnInit () - в идеале, вы просто должны иметь все в ngOnInit().
• Вам необходимо отписаться от подписки, обычно в ngOnDestroy(), чтобы избежать утечек памяти.