2017-01-25 4 views
0

사용자가 개체를 표시, 추가, 업데이트 할 수있게해야합니다. Angular 2 프로젝트에 대해 세 가지 구성 요소 또는 하나의 구성 요소를 갖도록 결정해야합니다.하나의 구성 요소 VS 각도 2의 개체 추가/표시/편집을위한 3 개의 구성 요소?

옵션 1 : 하나 개의 구성 요소

  • 장점 : 쉽게 데이터 공유 (DRY).
  • 단점 : 거대한 템플릿.

옵션 2 : 분할 3 개 요소

  • 장점으로는 : 잘 SRP 작은 템플릿을 나누었다.
  • 단점 : 데이터 공유 오버 헤드 (맞춤 이벤트 ..).

어떻게 이런 상황을 처리 할 수 ​​있습니까? 어느 옵션으로 갈까요? 제 3의 옵션이 있습니까?

답변

1

조치를 트리거하는 데 한 구성 요소 만 사용하고 편집 UI, 하나 또는 세 개의 구성 요소를 정확히 표시하는 방법에 따라 달라집니다.

버튼과 같이 핸들러에 무언가에 "모드"속성을 보낼 것이다 : 등등

if (evt === 'edit') { do something edit-ish... } 
if (evt === 'add') { do something add-ish... } 
if (evt === 'delete') { do something delete-ish...} 

그리고있다. 실제 편집 필드 자체, 템플릿의 몇 가지 속성을 토글 할 수 있습니다 (예 : 지시문을 사용하여 입력 필드의 스타일을 "편집 가능"으로 변경할 수 있음). 또는 정말로 정교한 작업을하고 있다면 아마도 그렇습니다. 별도의 구성 요소를 작성하십시오.

요점은 다른 개발자가 쉽게 해독 할 수 있어야한다는 것입니다. "모두를 다스리는 한 구성 요소"가 타협하면 그 선택은 분명합니다. 떨어져 그것을 분해하십시오.