Angular 구조 지침

WPF에서 시각적 트리 요소의 외관을 제어하는 가장 일반적인 방법은 바인딩 및 가시성 변환기를 사용하는 것으로, 이는 추가 논리와 정적 자원이 필요합니다. Angular DOM 요소의 외관이나 동작을 바꾸는 유사한 기법도 가지고 있는데, 이는 Angular 지침입니다. Angulardirectives 유형 중 하나는– DOM 요소를 추가하거나 제거하여 DOM 레이아웃을 변경하는 방식입니다structural directives.

이 주제에서는 다음 세 가지 구조적 지침 -ngIf,와ngSwitchngFor를 시연할 것입니다. 이름만 봐도 알 수 있듯이, 이들 각각은 C# 구조와 비교할 수 있습니다. 는ngIf "if-else" C# 코드 블록과 같고, CngSwitch # 스위치 케이스 문장과 같으며, 마지막으로 CngFor # "for-loop"와 정확히 같은 의미입니다.

`ngIf` Directive

각 지침ngIf부터 살펴보겠습니다. 이 지침은 불리언 조건에 따라 요소를 표시하거나 숨길 수 있게 해줍니다. 먼저 이름을 포함하는 "h2" 태그를 가진 "div" 요소를 만들 것입니다.

<div>
  <h2>John</h2>
</div>

이 글을 저장하면, 브라우저가 John이라는 이름을 렌더링할 거예요. 하지만, 예를 들어 "h2" 태그의 가시성 조건을 기반으로 하려는 불리언 식이 있다고 가정해 봅시다. 예를 들어, "isFirstName"이라는 속성을 추가하고 false로 설정할 것입니다. isFirstName이 참일 때 div를 렌더링하려면, 다음과 같은 문법*ngIf = "isFirstName"을 사용해야 합니다.

public isFirstName = false;

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>

파일을 저장하면, isFirstName이 false이기 때문에 브라우저에서 더 이상 이름이 렌더링되지 않는 것을 볼 수 있습니다. 하지만 isFirstName을 진짜로 업데이트하면 브라우저에서 "John"의 이름이 렌더링됩니다. isFirstName을 다시 false로 설정하면, 브라우저에서 이름이 더 이상 렌더링되지 않고 비어 있는 것을 알 수 있습니다. 이것이 명문의 기본 동작ngif 입니다 - 표현식이 참이면 제공된 템플릿을 렌더링하고, 그렇지 않으면 빈 상태입니다.

WPF로 동일한 동작을 달성하려면 가시성 변환기를 사용해야 합니다. 코드는 다음과 유사합니다.

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>

Angular 에서는 훨씬 쉽고 간단합니다.

속성이 거짓일 경우isFirstName 대신 성을 제공하라는 요구사항을 만들자. 이를 위해 지침의ngIf "else" 조항을 활용할 것입니다. 먼저 성을 포함하는 정의 태그인 "h2" 태그를 만들어ng-template 보겠습니다. Anng-template은 단순히 DOM에 포함되지 않은 콘텐츠를 정의할 수 있게 해주는 자리 표시자이며, 지시문과 같은 코드를 통해ngIf 추가할 수 있습니다. 하지만 이 명령어를 사용하려면 "lastname"과 같은 템플릿 참조 변수 이름을 부여해야 합니다. 이제 우리의ng-template 이름을 만들었으니, 명령어에 들어가ngIf 서 "; 그렇지 않으면 성"을 추가하고 저장해 봅시다. "isFirstName"이 거짓이기 때문에, else는 성을 사용 하라고 말하는 것으로, 이는 성이 포함된 템플릿을 사용한다는 뜻입니다.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

이제 이것을 작성할 수 있는 또 다른 방법은 "isFirstName, 그 다음에는 firstname, else lastname "이라고 말할 수 있습니다. 따라서 그렇게 하려면 "firstname"이라는 또 다른 템플릿을 만들어야 합니다.

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

"isFirstName"을 true로 바꾸면, 브라우저에서 이름이 렌더링됩니다. 그리고 디렉시브 사용ngIf에 대한 마지막 팁은 표현식이 단일 속성에만 국한되지 않는다는 것입니다. 실제로 여러 속성이나 함수를 사용할 수 있지만, 표현식 전체가 불리언 결과를 반환한다면 됩니다. 예를 들어, 논리 연산" && isValid || getIsValidName()" 자도 사용할 수 있습니다.

`ngSwitch` Directive

다음으로 논의할 지침은 바로 지침입니다ngSwitch. 이를 통해 한 표현식을 여러 표현식과 비교하여 어떤 템플릿을 추가하거나 제거할 수 있는지 결정할 수 있습니다. 예를 들어, 쉐보레, 포드, GMC 등 자동차 제조사를 나타내는 'h2' 요소가 있다고 합시다. 저희는 typescript 파일에 기본 값을 "Chevy"로 정의한 "make" 속성의 값을 기반으로 이 중 하나만 표시하고자 합니다. 이를 위해 다음 문법ngSwitch을 가진 지시문을 사용해야[ngSwitch] = expression 하며, 여기서 표현식이 우리의 "make" 속성입니다. "div" 요소에 "h2" 태그를 감싸는 것만으로는 충분하지 않습니다. WPF처럼 각 "h2" 요소에 "case" 문장을 추가해야 합니다. 그 문법은 다음과*ngSwitchCase = expression 같습니다. 이 경우에는 텍스트와 직접 비교하는 것이므로 값 주위에 싱글 따옴표를 붙이는데, 이는 최종 결과가 다른 두 값/에 대해 비슷하거나*ngSwitchCase = "'Chevy'" 비슷하게 나온다는 뜻입니다.

make = "Chevy";

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>

그걸 저장하면, "make" 속성의 값이 "Chevy"로 설정되어 있어서 브라우저에서 Chevy 옵션만 렌더링될 것입니다. "GMC"라고 바꾸고 저장하면, 브라우저에서는 GMC 옵션만 렌더링됩니다. 이제 만약 선택할 수 없는 옵션을 추가한다면, 예를 들어 "람보르기"라고 하자면, 그것은 우리의 어떤 조건에도 맞지 않아 아무것도 만들어지지 않을 것입니다. 일반적으로 C# 내에서 switch 문(switch statement)을 사용할 때는 대소형뿐만 아니라 기본 값도 함께 있습니다. Angular 에서도 같은 기능이 있습니다 – "찾을 수 없음" 텍스트로 다른 옵션을 추가하고 다른*ngSwitchDefault 값을 표시하면 기본값으로 표시할 수 있습니다.

<h2 *ngSwitchDefault>Not Found</h2>

이 경우 Lambo를 찾고 있다면 Lambo 옵션이 없으므로 "찾을 수 없음"인 기본 케이스로 전환하고 브라우저에 "찾을 수 없음"이 렌더링됩니다. 우리가 지적해야 할 한 가지 점은 이것이 표현식이기 때문에 우리가 전달하는 표현식과 일치하는 결과를 반환하는 한 함수라도 사용할 수 있다는 것입니다. 매우 간단합니다!

`ngFor` Directive

다음은ngFor 지시입니다. 이 지침은 객체 집합을 반복하여 각 항목에 대한 템플릿을 추가할 수 있게 해줍니다. 먼저 typescript 파일에 객체 모음을 추가하는 것부터 시작하겠습니다. 우리는 이를 여러 브랜드와 쉐보레, 포드, GMC, 닷지를 추가하는 배열이라고 부를 것입니다. 다음으로 "div"를 만들고, 각 "div"마다 해당 브랜드 이름을 나열하는 "h2" 태그를 만들 것입니다. 이를 위해 우리는 그 명령어, 즉 구문을ngFor 사용할*ngFor="let make of makes" 것입니다. 이렇게 하면 표현식의 "let make" 부분에서 정의된 "make" 속성을 보간하여 "h2" 태그에 출력할 수 있습니다.

makes = ["Chevy", "Ford", "GMC", "Dodge"];

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>

모든 것이 잘 진행된다면, 해당 배열의 각 항목에 대해 브라우저에서 h2 태그를 사용해 표현하는 것을 알 수 있을 것입니다. 또한, 지침에는ngFor 해당 컬렉션에 대한 더 많은 정보를 얻을 수 있는 몇 가지 보조 항목도 포함되어 있습니다:

"index as i" - 각 항목의 인덱스가 무엇인지 결정할 수 있습니다.

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>

"first as f" - 항목이 컬렉션의 첫 번째 항목인지 여부를 얻을 수 있습니다.

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>

"last as l" - 컬렉션의 마지막 행이나 마지막 항목을 가져올 수도 있습니다.

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>

"odd as o" 또는 "even as e" - 컬렉션의 항목이 홀수 위치에 있는지 짝수 위치에 있는지 판단할 수 있습니다.

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>

이것이 각도 애플리케이션에서 뷰에 요소를 추가하고 제거하는 것이 얼마나 쉬운지입니다. 구조적 지시문을 사용하면 작업이 완료됩니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular 구조 지침

ngIf Directive

ngSwitch Directive

ngFor Directive

Additional Resources

테마

`ngIf` Directive

`ngSwitch` Directive

`ngFor` Directive