错误：无法解析Angular6中MenuController的所有参数

Question

我正在尝试添加解析器文件以分隔业务逻辑，并且卡在此错误中。

错误：无法解析/home/training/Attinad_Projects/TemplateApp/me-cmf-web-template-angular/src/app/shared/components/header/menu/menuController.ts中的MenuController的所有参数：（？） 。

我的menuController文件是：

 import { ResolverMenuTheme } from './interfaces/ResolverInterface'; import { MenuTransformation } from './menuTransformation'; export class MenuController{ menuData: ResolverMenuTheme; resolverObject : ResolverMenuTheme; menuTransformationData: any; constructor(menuTheme: ResolverMenuTheme){ this.menuData = menuTheme; } menuController(): ResolverMenuTheme{ this.menuTransformationData = new MenuTransformation(); this.resolverObject = this.menuTransformationData.transformationMenu(this.menuData); return this.resolverObject; } } 

我的菜单组件文件

 import { AfterViewInit, Component, ElementRef, ViewChildren, ViewChild, Input, Output, EventEmitter, Renderer2, QueryList, Inject, PLATFORM_ID, OnInit } from '@angular/core'; import { MenuConfig } from './interfaces/MenuConfig'; import { ResolverMenuTheme } from './interfaces/ResolverInterface'; import { isPlatformBrowser } from '@angular/common'; import { MenuTheme } from './interfaces/MenuTheme.d'; import { MenuController } from './menuController'; @Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.scss'] }) export class MenuComponent implements AfterViewInit, OnInit { @Input() menuConfig: MenuConfig[]; @Input() menuTheme: MenuTheme; @Input() resolverMenuTheme: ResolverMenuTheme; @Output() menuClicked = new EventEmitter<boolean>(); isOpen: boolean; @ViewChildren('menuItem') menu: QueryList<any>; @ViewChildren('menuText') menuText: QueryList<any>; @ViewChild('submenuContainer') submenuContainer: ElementRef; @ViewChildren('submenu') submenu: QueryList<any>; @ViewChildren('submenuText') submenuText: QueryList<any>; @ViewChild('navBar') elem; @ViewChildren('navBar') navBar: QueryList<any>; @ViewChildren('bullet') bullet: QueryList<any>; menuArray: MenuConfig[]; moreMenuArray: MenuConfig[]; innerwidth: number; moreMenuItem: boolean; resolverObject1: ResolverMenuTheme; constructor(private renderer: Renderer2, @Inject(PLATFORM_ID) public platformId: Object,private menuControlData: MenuController) { this.isOpen = true; this.moreMenuItem = false; } /** * @description : the theme of different parats of the menu will be set here. * @returns void */ ngOnInit(): void { if (isPlatformBrowser(this.platformId)) { let deviceWidth: number; let menuCount: number; let displayMenuCount: number; // retrieve the count of menu items menuCount = this.menuConfig.length; // retrive the width of device deviceWidth = (window.screen.width); // appending class to menu to accomodate more menu items if (deviceWidth > 1400) { displayMenuCount = 5; } else if (deviceWidth > 1100) { displayMenuCount = 4; } else if (deviceWidth > 800) { displayMenuCount = 3; } else if (deviceWidth > 764) { displayMenuCount = 3; } if (displayMenuCount < menuCount) { this.moreMenuItem = true; } else { this.moreMenuItem = false; } this.menuArray = this.menuConfig.slice(0, displayMenuCount); this.moreMenuArray = this.menuConfig.slice(displayMenuCount, menuCount); } } ngAfterViewInit() { new MenuController(this.menuTheme); this.menuTheme.menuTextColor = null; this.resolverObject1 = this.menuControlData.menuController(); // console.log(this.resolverObject); this.menuText.forEach(element => { this.renderer.setStyle(element.nativeElement, 'color', this.resolverObject1.menuTextColor); }); this.submenuText.forEach(element => { this.renderer.setStyle(element.nativeElement, 'color', this.resolverObject1.submenuTextColor); }); if (this.submenuContainer) { this.renderer.setStyle(this.submenuContainer.nativeElement, 'background-color', this.resolverObject1.submenuBg); } } /** * @description - styling element(menu,submenu) properties(color,bgcolor etc) on mouse hover * @param element - ElementRef * @param type - string * @param property -string * @returns void */ applyStyleOnMouseHover(element: ElementRef, type: string, property: string): void { switch (type) { case 'menu': switch (property) { case 'color': this.renderer.setStyle(element, 'color', this.resolverObject1.menuHoverTextColor); break; case 'bgcolor': this.renderer.setStyle(element, 'background-color', this.resolverObject1.menuHoverBg); break; default: break; } break; case 'submenu': switch (property) { case 'color': this.renderer.setStyle(element, 'color', this.resolverObject1.submenuHoverTextColor); break; case 'bgcolor': this.renderer.setStyle(element, 'background-color', this.resolverObject1.submenuHoverBg); break; default: break; } break; case 'bullet': switch (property) { case 'bgcolor': this.bullet.forEach(el => { this.renderer.setStyle(el.nativeElement, 'background-color', this.resolverObject1.menuHoverTextColor); }); break; default: break; } break; default: break; } } /** * @description - remove styling element on mouse leave * @param element - ElementRef * @param type - string * @param property -string * @returns void */ removeStyleOnMouseLeave(element: ElementRef, type: string, property: string): void { switch (type) { case 'menu': switch (property) { case 'color': this.renderer.setStyle(element, 'color', this.resolverObject1.menuTextColor); break; case 'bgcolor': this.renderer.removeStyle(element, 'background-color'); break; default: break; } break; case 'submenu': switch (property) { case 'color': this.renderer.setStyle(element, 'color', this.resolverObject1.submenuTextColor); break; case 'bgcolor': this.renderer.removeStyle(element, 'background-color'); break; default: break; } break; case 'bullet': switch (property) { case 'bgcolor': this.bullet.forEach(el => { this.renderer.setStyle(el.nativeElement, 'background-color', this.resolverObject1.menuTextColor); }); break; default: break; } break; default: break; } } /** * @description emit event back to parent element upon click menu * @returns void */ openSubmenuList(): void { this.menuClicked.emit(); } } 

Answer 1

您的问题是您正在将无法解析的参数传递给构造函数，并且无法通过angular自动注入。

因此，最简单的解决方案是将这些参数传递给第二种方法，例如init() 。 在这种方法中，Angular不应尝试注入任何东西，并且应该安全地传递参数，并担心该警告。

因此，您可以像这样编辑MenuController ：

import { ResolverMenuTheme } from './interfaces/ResolverInterface';
import { MenuTransformation } from './menuTransformation';

export class MenuController{
    menuData: ResolverMenuTheme;
    resolverObject : ResolverMenuTheme;
    menuTransformationData: any;

    init(menuTheme: ResolverMenuTheme){
        this.menuData = menuTheme;
    }


menuController(): ResolverMenuTheme{
        this.menuTransformationData = new MenuTransformation();
     this.resolverObject = this.menuTransformationData.transformationMenu(this.menuData);
    return this.resolverObject;
    }
}

构造函数现在为空，因此已将其删除， init()是必须手动调用的简单方法。

我不知道这种方法在您的应用程序中是否有用，因为我不知道您如何使用MenuController ，但是要了解的重要一点是您MenuController该警告的原因。

编辑菜单组件

如果删除前面提到的构造函数，则现在只有默认的可用构造函数。 因此，您必须使用以下参数实例化控制器：

this.menuController = new MenuController();

然后可以将参数传递给新创建的方法，如下所示：

this.menuController.init(this.menuTheme);