沒有數組的提供者？

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; 
    } 

} 

的的菜單項變量都使用此代碼傳遞到組件：

<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[] = []; 
} 

現在我可以打電話給我SideMenu在我App.Component.ts

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); 
    }   
}