没有Array的提供者？

Question

当我使用ng服务器编译时，代码会编译但在Chrome控制台中返回此错误：

这是我的app.component.ts。这是我第一次实例化MySideMenu服务

 import {SubMenu, MenuItem,  MySideMenu} from './Modules/Layout/side-menu/side-menu.component';
import { ToastrService } from 'ngx-toastr';
import { Component, Renderer2, ElementRef, OnInit, ViewEncapsulation, HostBinding, ViewChild } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [MySideMenu, MenuItem, SubMenu]
})
export class AppComponent implements OnInit {
   private toolBarState= false;

   ngOnInit() {
  }

  constructor(private renderer: Renderer2, public menuItems: MySideMenu) {
    const item1 = new MenuItem('TCPO', 'fa fa-android', [
      new SubMenu('Insumos', 'fa fa-book'),
      new SubMenu('CUB', 'fa fa-book'),
      new SubMenu('Budget', 'fa fa-book')
    ] );
    const item2 = new MenuItem('Market', 'fa fa-money', [
      new SubMenu('Sell', 'fa fa-bomb'),
      new SubMenu('Sign', 'fa fa-book'),
    ] );

    menuItems._items.push(item1);
    menuItems._items.push(item2);

  }

  onToolBarClick() {
    this.toolBarState = !this.toolBarState;
  }

}

使用以下代码将menuitems变量传递到组件中：

 <appSideMenu [menuItems]='menuItems'></appSideMenu>

现在，SideMenuModule声明了SideMenuComponent，它具有我认为错误来自的服务：

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef,
  Input, Injectable } from '@angular/core';
import { state, trigger, style, transition, animate } from '@angular/animations';

@Injectable()
export class MySideMenu {
  public _items: MenuItem[] = [];
  constructor (items: MenuItem[]) {
    this._items = items;
  }
}

@Injectable()
export class MenuItem {
  public _title: string;
  public _icon: string;
  public _subMenu: SubMenu[] = [];
  constructor(title: string, icon: string, subMenu: SubMenu[]) {
    this._title = title;
    this._icon = icon;
    this._subMenu = subMenu;
   }
}

@Injectable()
export class SubMenu {
  public _title: string;
  public _icon: string;
  constructor(title: string, icon: string) {
    this._title = title;
    this._icon = icon;
   }
}


@Component({
  selector: 'appSideMenu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css'],
  animations: [
    trigger('menuTrigger', [
      state('open', style({ width: '100px' })),
      state('close', style({ width: '50px' })),
      transition('open<=>close', animate('300ms ease-in'))
    ])]
})
export class SideMenuComponent implements OnInit {

  state = 'close';
  activeMenuItem: number;
  @Input() stateSubSideMenu = 'invisible';
  @Input() menuItems: MySideMenu;

  constructor() { }

  ngOnInit() { }

  SideMenuToggle(el: HTMLElement) {
    if (el.id === 'sidebar') {
      (this.state === 'open') ? this.state = 'close' : this.state = 'open';
      this.stateSubSideMenu = 'invisible';
    }else {
      (this.state === 'open') ? this.stateSubSideMenu = 'open' : this.stateSubSideMenu = 'close';
    }
  }

  onMenuItemClick(i: number) {
    this.activeMenuItem = i;
    (this.state === 'open') ? this.stateSubSideMenu = 'opened' : this.stateSubSideMenu = 'closed';
  }

  trackByFn(index, item) {
    return index;
  }

}

Answer 1

（代表OP发布）。

以下是我如何解决它。

问题出在构造函数中。我正在定义一个空数组而不用空值初始化它。现在，MenuItem在public _subMenu: SubMenu[]= []的构造函数中初始化，而不仅仅是_subMenu: SubMenu[]。

import { Injectable } from '@angular/core';

@Injectable()
export class SubMenu {
  /*public _title: string;
  public _icon: string;*/
  constructor(public _title: string, public _icon: string) {
  }
}

@Injectable()
export class MenuItem {
  /*public _title: string;
  public _icon: string;
  public _subMenu: SubMenu[] = [];*/
  constructor(public _title: string, public _icon: string, public _subMenu: SubMenu[]= []){
  }
}

@Injectable()
export class MySideMenu {
  public _items: MenuItem[] = [];
}

现在我可以在App.Component.ts

的构造函数中调用我的SideMenu

 constructor(private renderer: Renderer2, public menuItems: MySideMenu) {
    const item1 = new MenuItem('TCPO', 'fa fa-android', [
      new SubMenu('Inputs', 'fa fa-book'),
      new SubMenu('CUB', 'fa fa-book'),
      new SubMenu('Budget', 'fa fa-book')
    ] );
    const item2 = new MenuItem('Market', 'fa fa-money', [
      new SubMenu('Sell', 'fa fa-bomb'),
      new SubMenu('Sign', 'fa fa-book'),
    ] );

    menuItems._items.push(item1);
    menuItems._items.push(item2);

  }

菜单自动生成：

Answer 2

只需将数组放在类

的构造函数之外

export class Animal{    
    public animals: Animal[];
    constructor(private animal: Animal) {
        this.animals = new Array<Animal>();
        animals.push(animal);
    }        
}