Как повторно использовать компонент Angular (содержащий форму) для различных настраиваемых типов использования в двух отдельных родительских компонентах?

Question

Я работаю над Angular проектом. У меня есть angular компонент component1, который имеет форму в своем файле HTML. Форма в основном основана на шаблонах и использует созданный пользователем объект Class (в качестве модели для переноса данных формы) вместо Angular Forms model Class. Теперь у меня есть еще два компонента, component2 и component3. Я хочу использовать component1 в обоих component2, а также component3 со следующими отличиями:

component2 предоставляет конечному пользователю новую пустую форму, которую он может заполнить и сохранить / Отправить. С другой стороны, component3 используется для двух целей: извлекать такие сохраненные / отправленные формы из серверной части и отображать их, конечно, по одной форме за раз. В форме component2 включены все поля. Однако в component3 все поля формы необходимо включить, если рендеринг сохраненной формы выполняется из бэкэнда; с другой стороны, все поля формы должны быть отключены при рендеринге отправленной формы из бэкэнда. component3 должен иметь возможность сохранять / отправлять существующие сохраненные формы (редактируемые); в то время как для уже отправленных форм он должен просто отображать их (не редактируемые).

В настоящее время я дублирую component1 в component4 и использую component1 с component2 и component4 с component3. Однако это кажется излишним. По сути, я хочу повторно использовать один и тот же код component1 и шаблон html как в component2, так и в component3. Однако, несмотря на все мои усилия, я не могу использовать его таким образом, чтобы функциональные возможности component2 и component3 обеспечивались без каких-либо компромиссов.

Я считаю, что на высоком уровне выходом является использование component1 в качестве дочернего компонента component2, а также component3 путем размещения его селектора в этих компонентах. Однако, учитывая функциональные возможности / цели, которые необходимы для обслуживания component2, а также component3, я не могу это сделать. Кроме того, мне нужно предоставить различные стили для component1 в component2 и component3.

Буду признателен за любую помощь в этом отношении, как я могу go о кодировании его таким образом, чтобы component1 может использоваться component2, а также component3 для реализации их функций без каких-либо помех, а также может обеспечивать различные стили css для формы component1 при использовании в component2 против component3 !!!

Answer 1

Я предполагаю, что в случае Component3, Component1 должен получить идентификатор или что-то подобное для загрузки сохраненных данных. Таким образом, идея состоит в том, чтобы иметь иерархию маршрутизации, подобную этой:

const routes: Routes = [
      {
       path: '',
       component: Component2,
       children: [{
         path: '/comp1',
         component: Component1 
       }]
      },
      {
       path: '',
       component: Component3,
       children: [{
         path: '/comp1:id',
         component: Component1 
       }]
      }
    ];`

В итоге, из компонента 2 вы можете вызвать компонент 1 только с помощью url / comp1, а из компонента 3, например, / comp1 / 1. Затем в Component1 вы можете проверить, доступен ли параметр id, а затем извлечь сохраненные данные. В противном случае отобразите пустую форму. Что касается стилей, вы можете использовать условные стили для таких полей формы, как, например,

[ngStyle]="{'background-color': (id!='') ? '#73c7af' : '#ffffff'}"