Angular 2 хранит классы компонентов в обслуживании

Question

Angular 2 хранит классы компонентов в обслуживании

0

Я хочу создать службу, в которой хранится объект угловых компонентов. Эта служба в основном будет иметь компоненты свойств, которые будут выглядеть как {key: componentClass}.

Это кажется довольно простым в реализации, и на самом деле это так, но я столкнулся с одной проблемой, и я не знаю, как ее решить.

Позволяет вызвать службу ComponentStoreService. В качестве примера это может выглядеть так:

@Injectable()
export class ComponentStoreService {
 components: { [key: string]: any; } = {};

   register(key: string, components: any): void {
     this.components[key] = components;
   }

   getByKey(key: string): any {
     return this.components[key];
   }

   getAll(): any {
     return this.components;
   }
}

и теперь давайте создадим 2 демонстрационных компонента и сохраним их:

const providers = ReflectiveInjector.resolve([ComponentStoreService]);
const injector = ReflectiveInjector.fromResolvedProviders(providers);
const componentStore= injector.get(ComponentStoreService );

@Component({
  selector: 'component-1',
  template: '<h2>component-1</h2>'
})
export class D1Component {constructor() {}}

componentStore.register('component-1', D1Component );

console.log('component-1 called', componentStore.getAll())

Второй:

    const providers = ReflectiveInjector.resolve([ComponentStoreService]);
    const injector = ReflectiveInjector.fromResolvedProviders(providers);
    const componentStore= injector.get(ComponentStoreService );

    @Component({
      selector: 'component-2',
      template: '<h2>component-2</h2>'
    })
    export class D2Component {constructor() {}}

    componentStore.register('component-2', D2Component );

    console.log('component-2 called', componentStore.getAll())

И в результате сначала console.log печатает объект, в который добавлен первый компонент. Это нормально. И второй console.log печатает только второй компонент. Это неверно.

Насколько я понял в каждом компоненте ComponentStoreService - отдельный экземпляр. Как я могу сделать это singleton в целом приложении? Я регистрирую ComponentStoreService только на уровне приложения. Это означает, что проблема в другом месте. Может быть, потому, что я вызываю службу вне класса компонентов.

kuldarim 21 июль 2016, в 14:10

Источник

0

То, что вы получаете, является правильным для этого кода: вы создаете два инжектора, поэтому вы получаете отдельные экземпляры того, что зарегистрировано в них. Реальный вопрос - какой цели вы пытаетесь достичь этим? Это не кажется правильным. На мой взгляд, такая механика не нужна.
Alexander Leonov 21 июль 2016, в 12:35
0

Мне нужно реализовать функциональность , которая позволяет показывать только те компоненты , от componentId , которые хранятся в config.json . Поэтому я подумал, что возможно есть объект с { key: componentClass } в котором хранятся все компоненты. Это дало бы возможность извлекать компоненты по ключу и отображать только те компоненты, Ids которых хранятся в config.json .
kuldarim 21 июль 2016, в 20:25
0

вы должны понимать, что эта технология имеет ограничения, например, таким образом вы не сможете управлять каналами, используемыми в шаблонах компонентов, и не сможете сами использовать эти компоненты в шаблонах. Кроме того, можно добиться того, чего вы хотите, но мне потребуется некоторое время, чтобы подготовить ответ для вас.
Alexander Leonov 22 июль 2016, в 12:02
0

Я не знаю о каналах, но об использовании компонента в шаблоне Вы не правы. Вы можете динамически визуализировать компонент, используя ComponentResolver. Пример здесь stackoverflow.com/questions/36325212/…
kuldarim 25 июль 2016, в 06:27

Показать ещё 2 комментария

Теги:

angular

angularjs

angular2-services

1 ответ

Ещё вопросы

То, что вы получаете, является правильным для этого кода: вы создаете два инжектора, поэтому вы получаете отдельные экземпляры того, что зарегистрировано в них. Реальный вопрос - какой цели вы пытаетесь достичь этим? Это не кажется правильным. На мой взгляд, такая механика не нужна.
Мне нужно реализовать функциональность , которая позволяет показывать только те компоненты , от componentId , которые хранятся в config.json . Поэтому я подумал, что возможно есть объект с { key: componentClass } в котором хранятся все компоненты. Это дало бы возможность извлекать компоненты по ключу и отображать только те компоненты, Ids которых хранятся в config.json .
вы должны понимать, что эта технология имеет ограничения, например, таким образом вы не сможете управлять каналами, используемыми в шаблонах компонентов, и не сможете сами использовать эти компоненты в шаблонах. Кроме того, можно добиться того, чего вы хотите, но мне потребуется некоторое время, чтобы подготовить ответ для вас.
Я не знаю о каналах, но об использовании компонента в шаблоне Вы не правы. Вы можете динамически визуализировать компонент, используя ComponentResolver. Пример здесь stackoverflow.com/questions/36325212/…

Yasemin çidem · Answer 1 · 2016-07-21T11-27-00.000Z

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

bootstrap(AppComponent, [ComponentStoreService]);

компонент 1:

    @Component({
      selector: 'component-1',
      template: '<h2>component-1</h2>'
    })
    export class D1Component {constructor(private _componentStoreService:ComponentStoreService) {}}

    componentStore.register('component-1', D1Component );

    console.log('component-1 called', this._componentStoreService.getAll())

component2

        @Component({
          selector: 'component-2',
          template: '<h2>component-2</h2>'
        })
        export class D2Component {constructor(private _componentStoreService:ComponentStoreService) {}}

        componentStore.register('component-2', D2Component );

        console.log('component-2 called', this._componentStoreService.getAll())

вы можете использовать поставщиков для внедрения ComponentStoreService.

Вы должны знать, что таким образом каждый компонент получает свой собственный ComponentStoreService . Если вы хотите поделиться службой, вы должны предоставить ее общему родителю - например, AppComponent .
Да, просто используйте ComponentStoreService в свойстве providers только корневого компонента и внедрите его в каждый компонент, который вы хотите зарегистрировать. stackoverflow.com/questions/34929665/...
Спасибо за исправление. Я отредактировал код.
Я также обычно склоняюсь предлагать это в bootstrap() потому что это делает более очевидным, что это для всего приложения, но руководство по стилю Angular2 предлагает использовать массив поставщиков корневого компонента AppComponent . Существует не так много различий в поведении , за исключением того, например , текущий маршрутизатор требует , чтобы быть предусмотрен на bootstrap()
Но мне нужно вызвать сервис за пределами класса компонента. Это означает, что я не могу использовать провайдера внутри компонента. Я пытался использовать ReflectiveInjector потому что я хотел получить экземпляр службы за пределами компонента. Это необходимо, потому что в противном случае метод службы не будет вызываться во время компиляции, а объект компонента не будет храниться в службе.