ОШИБКА в: Не удается разрешить все параметры для MenuController в Angular6

Question

Я пытаюсь добавить файл распознавателя, чтобы отделить бизнес-логику, и застрял с этой ошибкой.

ОШИБКА в: Не удается разрешить все параметры для MenuController в / home / training / Attinad_Projects/TemplateApp/me-cmf-web-template-angular/src/app/shared/components/header/menu/menuController.ts: (?).

Мой файл 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, но важная вещь для понимания - причина, по которой вы получаете это предупреждение.

РЕДАКТИРОВАТЬ ДЛЯ МЕНЮКОМПОНЕНТОВ

Если вы удалите предыдущееупомянутый конструктор, теперь у вас есть только один доступный по умолчанию.Таким образом, вы должны создать экземпляр контроллера с нашими параметрами, такими как:

this.menuController = new MenuController();

, тогда вы можете передать свой параметр вновь созданному методу следующим образом:

this.menuController.init(this.menuTheme);