Как создать компоненты Angular с параметрами? - PullRequest
Новая
       43

Как создать компоненты Angular с параметрами?

0 голосов
/ 11 апреля 2019

Я пытался создавать экземпляры компонентов, передавая такие параметры, как nameFilter = new FilterComponent("Name");, но я получаю эту ошибку:

NullInjectorError: Нет поставщика для строки!

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

Вот код компонента 

import { Component, OnInit, Inject } from '@angular/core';

@Component({
     selector: 'app-filter',
     templateUrl: './filter.component.html',
     styleUrls: ['./filter.component.scss']
})
export class FilterComponent implements OnInit {
     title: String;

     constructor(title: String) {
          this.title = title;
     }

     ngOnInit() {
     }
}

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Ошибка ясна, и вы правы, механизм внедрения зависимостей вызывает ее.Каждая зависимость, которую вы передаете в конструктор, должна быть внедрена во время выполнения, и Angular должен знать, что передать.

В вашем случае Angular не знает, что вводить как строку title.

Вы можете явно указать Angular, что вводить в массиве вашего поставщика модулей для типа String.Однако это означает, что все, что вы предоставляете в массиве провайдеров, будет использоваться каждый раз.

@NgComponent({
    ...
    providers: [
    { provide: String, useValue: 'my title' }
  ],
})

Посмотрев на ваш код, вы можете инициализировать компонент с помощью переменной @Input - Угловое взаимодействие компонента 

export class FilterComponent implements OnInit {
     @Input() title: string; 
}

<app-filter [title]="Title 1"></app-filter>

Простая демонстрация: https://stackblitz.com/edit/angular-rs6sfy

0 голосов
/ 11 апреля 2019

Как хорошая практика проектирования, избегайте вставки примитивных типов данных, таких как string, number, date и т. Д. В конструкторы компонентов.

Но если вам все еще нужно ввести их. Затем вы должны сообщить Angular о токене и значении, которое будет введено.

Для этого Angular предоставляет API InjectionToken. https://angular.io/api/core/InjectionToken#injectiontoken

Пример добавления типа даты в компонент: 

export const DATE = new InjectionToken<Date>('date');

@NgComponent({
    ...
    providers: [
    { provide: DATE, useValue: new Date() } //can be declared at the module as well
  ],
})
export class SomeComponent {

  constructor(
    @Inject(DATE) private fromDate: Date,
    @Inject(DATE) private toDate: Date
  ) {}

}
...