时间戳

首页 > 解决方案 > 输入子组件给出错误，但有时会加载

angular - 输入子组件给出错误，但有时会加载

问题描述

我有一个从父组件传递给子组件的对象。当我运行时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;

标签： angulartypescript

解决方案

将带下划线的界面更改为any，就像您在父组件中一样，它应该可以解决您的问题。

另外，查看代码，有几点：

  • 您在构造函数和 ngOnInit() 中有重复的代码（可能是因为它是 WIP） - 理想情况下，您只需将所有内容都放在ngOnInit().
  • 您需要取消订阅，通常是ngOnDestroy()为了避免内存泄漏。

推荐阅读