소개하다.

다시 사용할 수 있고 개발자에게 친절한 구성 요소를 구축하기 위해서, 우리는 그것들을 더욱 동적으로 (읽기에 더욱 적응성 있게) 해야 한다.좋은 소식입니다. Angular에서 아주 좋은 도구를 제공했습니다.예를 들어, <ng-content>를 사용하여 어셈블리에 컨텐트를 주입할 수 있습니다.

@Component({
  selector: 'child-component',
  template: `
    <div class="child-component">
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildComponent {}

@Component({
  selector: 'parent-component',
  template: `
    <child-component>
      Transcluded content
    </child-component>
  `,
})
export class ParentComponent {}

세그먼트 1: 변환
비록 이런 전환 기술은 간단한 내용 투영에 매우 유용하지만, 투영된 내용이 상하문 의식을 가지기를 원한다면 어떻게 해야 합니까?예를 들어 목록 구성 요소를 실현할 때, 부모 구성 요소에 항목 템플릿을 정의하고, 상하문 (현재 항목) 을 이해하기를 원합니다.
각도가 있는 장면은 674종, 454종!
본고에서 우리는 ngTemplateOutlet가 무엇인지 정의한 다음에 위에서 언급한 목록 구성 요소와 카드 구성 요소를 구축하여 두 가지 가장 흔히 볼 수 있는 ngTemplateOutlet 용례를 볼 것이다.이 구성 요소들을 한 걸음 한 걸음 실현할 것이기 때문에 본고가 끝날 때 각도 구성 요소에서 사용하는 것이 편하다고 느낄 것입니다:)

정의

현재 Angular 문서 ngTemplateOutlet 에서 준비된 TemplateRef에서 삽입식 보기를 삽입하는 명령을 볼 수 있습니다.
이 명령에는 두 가지 속성이 있습니다.

ngTemplateOutlet: 템플릿 참조(유형: ngTemplateOutlet.

ngTemplate OutletContext: EmbeddedViewRef에 첨부할 컨텍스트 객체입니다.컨텍스트 객체에서 키TemplateRef를 사용하여 기본값으로 설정합니다.

즉, 서브어셈블리에서 부모 어셈블리에서 템플릿을 가져오고 컨텍스트 객체를 템플릿에 주입할 수 있습니다.그런 다음 상위 어셈블리에서 이 컨텍스트 객체를 사용할 수 있습니다.
만약 당신이 이것이 너무 추상적이라고 생각한다면, 다음은 그것을 어떻게 사용하는지의 예이다.

<!-- Child component -->
<child-component>
  <ng-container
    [ngTemplateOutlet]="templateRefFromParentComponent"
    [ngTemplateOutletContext]="{ $implicit: 'Joe', age: 42 }"
  >
  </ng-container>
</child-component>

<!-- Parent component -->
<parent-component [templateRefFromParentComponent]="someTemplate">
  <ng-template #someTemplate let-name let-age="age">
    <p>{{ name }} - {{ age }}</p>
  </ng-template>
</parent-component>

세션 2:ngTemplateOutlet 사용
위 코드에서 서브어셈블리에는 "Joe-42"단락이 포함됩니다.
이름($implicit에 대해 우리는 상하문 대상을 사용해야 하는 어떤 속성을 지정하지 않았습니다. 왜냐하면 이름은 let-name 속성에 저장되어 있기 때문입니다.다른 한편, 나이($implicit에 대해 우리는 사용할 재산의 명칭을 확실히 지정했다(본례에서는let-age="age".
됐어, 이 정의들은 충분해.인코딩을 시작합시다.

The code that will be displayed in this article could be found in this Github repository

용례 1: 컨텍스트 인식 템플릿

상위 어셈블리에서 두 개의 입력을 가져오는 목록 컴포넌트를 구성합니다.

데이터: 대상 목록.

itemTemplate: 목록의 각 요소를 나타내는 템플릿입니다.

run ng new templateOutletTutorial --minimal to generate a small Angular project to code along

각도 설명도 (age 를 사용하여 목록 구성 요소를 생성합니다.완료되면 데이터 속성의 모든 항목 (입력 목록) 을 표시하는 구성 요소를 실행합니다.ng g c components/list의 매번 교체에서itemTemplate 속성에 부모 구성 요소가 제공하는 삽입식 보기를 삽입합니다.이 작업을 수행할 때 구성 요소는 현재 항목을 포함하는 상하문 대상을 추가해야 합니다.
마지막으로 목록 구성 요소는 다음과 같습니다.

@Component({
  selector: 'app-list',
  template: `
    <ul class="list">
      <li class="list-item" *ngFor="let item of data">
        <ng-container
          [ngTemplateOutlet]="itemTemplate"
          [ngTemplateOutletContext]="{ $implicit: item }"
        ></ng-container>
      </li>
    </ul>
  `,
  styleUrls: ['list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ListComponent {
  @Input() data: any[];
  @Input() itemTemplate: TemplateRef<HTMLElement>; // a template reference of a HTML element
}

코드 세션 3.1: 구성 요소 구현 목록
그런 다음 상위 어셈블리에서 목록 (객체) 및 템플릿을 사용하여 호출 목록 컴포넌트를 참조해야 합니다.

<app-list
  [itemTemplate]="customItemTemplate"
  [data]="[{ id: 4, name: 'Laptop', rating: 3 },
    { id: 5, name: 'Phone', rating: 4 },
    { id: 6, name: 'Mice', rating: 4 }]"
>
  <ng-template #customItemTemplate let-item>
    <div style="display: flex; justify-content: space-between;">
      <span> {{ item.id }} - <b>{{ item.name }}</b> </span>
      <mark> Stars: {{ item.rating }} </mark>
    </div>
  </ng-template>
</app-list>

코드 세그먼트 3.2: 상위 구성 요소 템플릿
프로그램 목록 구성 요소 태그에ng 템플릿 (프로젝트 템플릿) 을 넣을 것입니다.이것은 단지 읽을 수 있도록 프로젝트 템플릿을 부모 템플릿에 필요한 위치에 놓을 수 있습니다.
또한 프로젝트 템플릿에 내연 스타일을 추가했지만 클래스를 주고 부모 구성 요소 스타일 파일에 스타일을 설정할 수도 있습니다.

예제 2: 템플릿 재부팅

우리는 ng-for 상하문 감지 템플릿을 투영하는 데 어떻게 도움을 주는지 보았고, 또 다른 위대한 용례인 템플릿을 다시 불러오는 것을 보았다.
이를 위해 두 부분으로 구성된 카드 구성 요소를 구축합니다.
직함: 카드의 직함.

내용: 카드의 주요 내용.

제목에 대해 우리는 간단한 문자열을 전달할 것이며, 내용에 대해서는 내용 투영을 사용하여 주입할 수 있다.각도 다이어그램 ngTemplateOutlet 을 사용하여 카드 구성 요소를 생성한 다음, 이 구성 요소는 다음과 같습니다.

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <header>{{ title }}</header>
      <article>
        <ng-content></ng-content>
      </article>
    </div>
  `,
  styleUrls: ['card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  @Input() title: string;
}

코드 세그먼트 4.1: 문자열* 제목의 카드 구성 요소*
부모 어셈블리 템플릿에서는 다음과 같이 부릅니다.

<app-card [title]="'hello there'">
  <p>i'm an awesome card.</p>
</app-card>

코드 세그먼트 4.2: 문자열* 헤더가 있는 부모 구성 요소 템플릿*
현재 제목에 그림 (((ng g c components/card) 을 넣거나 제목 템플릿에 다른 구성 요소를 사용하려고 한다면 가정하십시오.타이틀 속성은 문자열 하나만 받아들일 수 있기 때문에 우리는 곤경에 빠질 것이다.
이 문제를 해결하기 위해서, 우리는 카드 구성 요소에서 새로운 행위를 실현할 수 있다.제목은 문자열 또는 TemplateRef일 수 있습니다.문자열이면 문자열 삽입값을 사용하여 템플릿에 연결합니다. 그렇지 않으면 <img> 을 사용합니다.
변경을 구현한 후 새 카드 구성 요소는 다음과 같습니다.

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <header *ngIf="isTitleAString(); else titleTemplateWrapper">{{ title }}</header>
      <ng-template #titleTemplateWrapper>
        <ng-container [ngTemplateOutlet]="title"></ng-container>
      </ng-template>
      <article>
        <ng-content></ng-content>
      </article>
    </div>
  `,
  styleUrls: ['card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  @Input() title: string | TemplateRef<HTMLElement>;
  isTitleAString = () => typeof this.title == 'string';
}

코드 세그먼트 4.3:strTemplateRef* 제목의 카드 구성 요소*
부모 어셈블리 템플릿에서는 다음과 같이 부릅니다.

<app-card [title]="title">
  <ng-template #title> <h2>Hello there</h2> </ng-template>
  <p>i'm an awesome card.</p>
</app-card>

코드 세그먼트 4.4: TemplateRef* 헤더가 있는 상위 구성 요소 템플릿*

나무

Mustapha Aouas
# 그 영어 하는 놈

팁🅰👨🏻‍💻: angular`templateOutlet`을 사용하면 자신의 템플릿을 호출하여 노드 트리를 표시할 수 있습니다
2020년 4월 23일 오전 10:32

마무리

그래서 우리는 ngTemplateOutlet가 무엇인지, 그리고 그것을 어떻게 이용하는지 보았다.우리는 가장 흔히 볼 수 있는 세 가지 용례를 보았지만, 지금 너는 이미 이 기술을 이해했으니, 아마도 너는 또 다른 위대한 용례를 발견할 것이다.
본 서첩은 여기까지입니다.니가 좋아했으면 좋겠어.만약 당신이 있다면, 당신의 친구와 동료와 나누세요.너도 트위터에서 나를 주목할 수 있다. 왜냐하면 이것은 나에게 매우 큰 도움이 되기 때문이다.
오늘 하루 즐겁게 보내세요!

다음은 뭘 읽을까요?

네가 알아야 할 각도 애니메이션

Mustapha Aouas・ 19년 8월 25일・ 8분 읽기

#angular #typescript #webdev #tutorial