Angular Service вводит параметр в конструктор на основе свойства компонента @Input

У меня есть служба с параметром в конструкторе, здесь простая строка позже URL-адреса или других объектов. Этот параметр задает внутреннее поведение службы, здесь просто задаются разные значения.

      
  constructor(@Inject(AUTHOR_TYPE) public authType: string ) { 

    console.log('Auth type is ' + authType);
    
    if(authType == 'international')
      this.authors = ["a1","a2","a2","a3"];
    else
      this.authors = ["local1","local2","local2","local3"];
  }

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

      export class AuthorsComponent implements OnInit {

  @Input('type')
  type: 'local' | 'international' = "local";
  authors: string[];
  
  constructor(service: AuthorsService) {
    this.authors = service.getAuthors();
   }

  ngOnInit(): void {

    console.log('component init as ' + this.type);
  }
}

Я хотел бы иметь компонент, способный переключаться между различными типами с помощью входного параметра (или другого режима привязки) и на основе типа компонента иметь возможность настроить внутреннюю службу для изменения поведения.

В приведенном ниже живом примере у меня просто есть компонент Authors с настраиваемым параметром и внутри службы для получения списка авторов, есть ли способ добиться этого?

Живой пример


[ОБНОВИТЬ]

Возможное решение, использующее @Inject в службе и фактически использующее 2 компонента с 2 предопределенными InjectionToken. Все еще не кажется оптимальным решением, так как у меня есть общий компонент более или менее пустой, просто нащупываю и отображаю подкомпоненты + 2 указанных компонента. Достигнута область, но я сгенерировал слишком много компонентов. Все еще открыты для других решений. Спасибо

возможное решение

2 ответа

Если кого-то интересует одно возможное решение, я понял, что это хорошее и простое решение:

selector.component, который предоставляет одно входное свойство [режим] перечисления типов

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

@Component({
  selector: 'app-selector',
  template: `<div > {{ mode }}</div>`,
  styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit {

  @Input('mode') mode : ModeEn = ModeEn.first;

  constructor() { }

  ngOnInit(): void {
  }

}

export enum ModeEn{
  first = 'first',
  second = 'second'
}

можно легко использовать из другого компонента, просто импортировав перечисление и назначив ему новое свойство

      import { ModeEn } from './selector/selector.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <app-selector [mode]="mode.first"></app-selector>
  <app-selector [mode]="mode.second"></app-selector>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  mode = ModeEn;
}

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

Вам нужно использовать конструктор и пользовательский токен внедрения?

У меня это работает здесь, используя ngOnInit вместе с геттерами и сеттерами https://stackblitz.com/edit/angular-ivy-9a7tfx?file=src/app/authors.service.ts

Другие вопросы по тегам