Angular — Разделение модулей — Лучшая практика для общего или общего кода

У меня есть несколько служб Angular, которые имеют идентичные методы для анализа ответа json, обработки ошибок и т. д. (например, отлов, например, если это ошибка 422).

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

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

Вот один например:

   private parseToString(jsonResponse: any){
    return Object.keys(jsonResponse).reduce(
      (prev, next) => prev.concat(jsonResponse[next].map(
        v => next + ' ' + v).join(', ')), []).join(', ');
  }

Есть ли способ создать вспомогательный модуль или что-то вроде Rails Concern, который вы можете включить?

Скажем, например, у меня есть эта папка:

приложение/сервисы

в котором есть мои различные служебные файлы .ts.

Я мог бы создать папку «app/services/helpers» и поместить в нее файл… но что входит в этот файл .ts?

например. parser-helper.ts может быть именем файла, но как выглядит код внутри него? Это должен быть модуль? Если да, то как я могу включить его в сервис?

Например, это рекомендуемый способ сделать это?

приложение/услуги/помощники/parser-helper.module.ts

module parserHelperModule {

  export function helperA(){}
  export function helperB(){}

}

typescript angular angular-module separation-of-concerns
person rmcsharry    schedule 19.02.2017    source источник
comment
Что ж, в TypeScript есть функции, классы, методы и т. д. Вы можете создать функцию, экспортировать ее из модуля, импортировать и использовать где угодно.   -  person JB Nizet    schedule 19.02.2017
comment
Я добавил пример кода, который, я думаю, вы имеете в виду, чтобы я попробовал.   -  person rmcsharry    schedule 19.02.2017

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать общий код как общий сервис, как показано ниже.

export class CommonService {
    public parseToString(jsonResponse: any){
            return Object.keys(jsonResponse).reduce(
                        (prev, next) => prev.concat(jsonResponse[next].map(
                            v => next + ' ' + v).join(', ')), []).join(', ');
  }  
   public someOtherMethod(){

   }
}

Таким образом, вы можете импортировать класс в любом месте приложения и использовать его.

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

Обновление 1:

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

@NgModule({
  imports:    [ 
                HttpModule, Logger, Toaster, ... 
              ],
  declarations: [ CommonCmoponents
                ],
  providers:[Service1, Service2 ]
})
export class CommonModule { }

Убедитесь, что ваш общий модуль просто служит коллекцией, этот CommonModule не должен содержать

  1. Браузерный модуль
  2. Компоненты начальной загрузки

Возможно, вы ищете изображение ниже, чтобы разделить проблемы.

введите здесь описание изображения

person Aravind    schedule 19.02.2017
comment
Спасибо, но по какой-то причине мне кажется странным или излишним создавать сервис. Или, по крайней мере, немного вводит в заблуждение, поскольку «CommonService» на самом деле не является сервисом сам по себе, а просто вспомогательным кодом. - person rmcsharry; 19.02.2017
comment
если вы не хотите, чтобы это был сервис, обслуживайте его без @Injectable(), и он остается простым классом - person Aravind; 19.02.2017
comment
Ах я вижу. И ваше обновление, вероятно, больше то, о чем я думал (исходя из фона Rails), так что спасибо, я многому научился из ваших ответов. - person rmcsharry; 19.02.2017
comment
@rmcsharry взгляните на обновление, которое дает гораздо больше деталей. - person Aravind; 19.02.2017
comment
спасибо за обновление, схема очень помогает понять это! - person rmcsharry; 19.02.2017
comment
рады помочь вам. :) поделись тем же знанием. Если вы можете изменить заголовок сообщения, чтобы оптимизировать поиск - person Aravind; 19.02.2017

arrow_upward
5
arrow_downward

В parser-helper.ts:

export function parseToString(jsonResponse: any): string {
    ...
}

В любом другом файле TypeScript:

import { parseToString } from './relative/path/to/parser-helper';

...
const s = parseToString(response);
person JB Nizet    schedule 19.02.2017
comment
Это интересно - модуль вообще не задействован. Является ли это рекомендуемым способом обмена общим кодом в приложении Angular2? - person rmcsharry; 19.02.2017
comment
Задействовано два модуля. Как объясняется в документации, в TypeScript так же, как в ECMAScript 2015 любой файл, содержащий импорт или экспорт верхнего уровня, считается модулем. - person JB Nizet; 19.02.2017
comment
Круто, спасибо за ссылку и курсив. Хотел бы я сейчас отметить два ответа как правильные! - person rmcsharry; 19.02.2017