настройка ngbDropdownMenu - PullRequest
       6

настройка ngbDropdownMenu

0 голосов
/ 24 декабря 2018

Я не хочу настраивать компонент начальной загрузки.Я использую Angular 7, поэтому функции Boostrap доступны через библиотеку ng-bootstrap.

В выпадающем списке ng-bootstrap есть проблема, которую я хочу исправить.Он устанавливает атрибут стиля прямо в теге (свойство left), и я не хочу этого.

Поэтому я пытаюсь расширить NgbDropdownMenu и переопределить метод:

position(triggerEl: any, placement: any) 

Текущая проблемаВнедрение ngbDropdown в мой подкласс.

Происхождение В NgbDropdownMenu есть странный раздел для инъекции:

NgbDropdownMenuDirective.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => NgbDropdown),] }] },
    { type: ElementRef },
    { type: Renderer2 }
];

Я не могу повторить приведенный выше фрагмент в моем файле ts из-за системного ограничения типа.

Если я удаляю фрагмент, веб-страница получает исключение, что NgbDropdown не найден, но он есть.Все работает с NgbDropdownMenu.

import {
  ElementRef,
  forwardRef,
  Directive, Input, TemplateRef,
  EventEmitter,
  Renderer2,
  Injector, Inject      
} from "@angular/core";

import { NgbDropdown, NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap/esm2015/dropdown/dropdown' ;
@Directive({
  selector: '[appCustomDropdown]',
  exportAs:'appCustomDropdown'     
})
export class CustomDropdownDirective extends NgbDropdownMenu { 
    constructor(dropdown: any, _elementRef: ElementRef<HTMLElement>, _renderer: Renderer2) {

    super(dropdown, _elementRef, _renderer);
  }

  position(triggerEl: any, placement: any): void {
  }
}

Попытка с файлом js и ctorParameters вместо ts приводит к тому же результату.Зависимость NbdDropdown не разрешена

core.js:14597 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CustomDropdownDirective -> NgbDropdown]: 
  StaticInjectorError(Platform: core)[CustomDropdownDirective -> NgbDropdown]: 
    NullInjectorError: No provider for NgbDropdown!
Error: StaticInjectorError(AppModule)[CustomDropdownDirective -> NgbDropdown]: 
  StaticInjectorError(Platform: core)[CustomDropdownDirective -> NgbDropdown]: 
    NullInjectorError: No provider for NgbDropdown!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveNgModuleDep (core.js:19784)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
    at resolveNgModuleDep (core.js:19784)
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveNgModuleDep (core.js:19784)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
    at resolveNgModuleDep (core.js:19784)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
defaultErrorLogger @ core.js:14597
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14645
next @ core.js:16628
schedulerFn @ core.js:12609
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593
(anonymous) @ core.js:16178
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115
onHandleError @ core.js:16178
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
resolvePromise @ zone.js:808
(anonymous) @ zone.js:724
webpackJsonpCallback @ bootstrap:25
(anonymous) @ main-frame-main-frame-module.js:1 
...