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