Как добавить Директиву в приложение Angular7 на CodePen - PullRequest
Новая
       12

Как добавить Директиву в приложение Angular7 на CodePen

0 голосов
/ 15 января 2019

Я изучаю угловой, я следую учебному пособию по Udemy и проверяю документы. Я создал угловое приложение на Codepen

и сейчас я пытаюсь определить директиву, но получил ошибку:

Uncaught Error: не удается разрешить все параметры для PointerDirective: (?).

Мой код выглядит так: 

@Directive({
    selector: '[pointer]'
})
class PointerDirective implements OnInit {
    constructor(private element: ElementRef) { }
    ngOnInit() { }   
}

@NgModule({
  imports: [
      BrowserModule,
      CommonModule
  ],
  declarations: [ PointerDirective, AppComponent ],
  providers: [],
  bootstrap: [ AppComponent ]
})
class AppModule {}

Я также пробовал другое имя (указатель приложения), но получил ту же ошибку.

Ручка основана на этой , но здесь она также не работает.

В поисках этой ошибки у меня есть информация, что это может быть циклическая зависимость, но здесь у меня просто простая директива. Что не так?

EDIT

Согласно @trichetriche, код не работает только на CodePen, я пропустил какой-нибудь файл? Как я могу создать базовый проект Angular без процесса сборки, используя только теги скрипта? Как заставить приложение Angular работать в Codepen?

EDIT2

Итак, я понял это: 

@Directive({
    selector: '[pointer]'
})
class PointerDirective implements OnInit {
    constructor(@Inject(ElementRef) private element: ElementRef) {
    }
    ngOnInit() { }   
}

Если вы знаете, почему в CodePen требуется @Inject, а не в обычном проекте, добавьте в ответ.

1 Ответ

0 голосов
/ 15 января 2019

В вашем примере codepen вы используете typcript в качестве препроцессора, поэтому весь ваш код компилируется машинописным шрифтом.

Angular имеет встроенную систему DI, которая сильно зависит от типов, которые мы предоставили в конструкторе в нашем коде ts. 

constructor(private element: ElementRef) { }
                             ^^^^^^^^^^^
                  we have to keep this type after ts compilation

По умолчанию машинопись не сохраняет эту информацию после компиляции, но мы можем установить параметр с именем emitDecoratorMetadata, чтобы этот тип оставался таким: 

__metadata("design:paramtypes", [ElementRef])

Но у codepen, похоже, нет такой опции, чтобы изменить это tsconfig.json, поэтому вы должны предоставить этот тип для скомпилированной версии самостоятельно.

Вот несколько вариантов:

1) выделенный @Inject декоратор: 

constructor(@Inject(ElementRef) private element: ElementRef) {}

2) статическое parameters свойство типа класса: 

class PointerDirective implements OnInit {
  constructor(private element: ElementRef) {}

  static parameters = [ ElementRef ]

3) статический ctorParameters метод: 

class PointerDirective implements OnInit {
  constructor(private element: ElementRef) {}

  static ctorParameters = () => [{ type: ElementRef }]

Forked Codepen

...