Angular: 뷰 코드는 변경할 수 없습니까?

시나리오: 작업 보기가 있지만 새 사양에서는 특별한 경우에만 사용되는 다른 선택 html 요소를 추가하도록 요청합니다. Open/Closed 원칙으로 인해 작업 보기를 변경하는 것이 아니라 수정하고 싶습니다. 뷰는 변경할 수 없습니까?

변경 가능한 방법:
기존 보기에 ng-content 태그를 추가하기만 하면 됩니다. 이것은 표시될 때 코드와 후속 보기를 변경합니다.

<working-component
   [firstOptions]="firstOptions"
>
... has other working stuff above.

<ng-content></ng-content> //Mutation here

... other working stuff below.
</working-component>

사용하는 방법:

<working-component
   [firstOptions]="firstOptions"
>
   //Here we add our new content!
   <ourNewComponent
      [options]="things"
   >
   </ourNewComponent>
</working-component>

ng-content 코드를 추가하면 기존 코드에 영향을 주지 않고 새 콘텐츠를 삽입할 수 있습니다. 뷰 레이어 구성 기술을 사용하고 있습니다.

불변의 길

<app-working
   [firstOptions]="firstOptions"
>
</app-working>
<ourNewComponent
      [options]="things"
>
</ourNewComponent>

이 방법에서는 작업 구성 요소 뒤에 새 구성 요소를 추가하고 스타일을 사용하여 동일한 단일 구성 요소처럼 보이도록 합니다. 우리는 원래 보기를 변경하지 않습니다.

변경 사항을 저장하는 기능에는 두 가지 설계 중 하나를 사용하는 두 구성 요소에 대한 주소 지정 기능만 있으면 됩니다. 옵션 2는 개방/폐쇄 원칙을 따릅니다. 옵션 1은 구성 규칙을 따릅니다. 어느 쪽이든, 코드가 각각에 대해 원자성인지 확인하십시오.

세 번째 방법은 원래 구성 요소를 열고 새 선택 요소를 삽입하는 것입니다. 사양에 따라 숨길 수 있어야 합니다. 특별한 경우에만 표시됩니다. 이것은 가장 불리한 옵션입니다.