Angular 템플릿 지시문에 대한 간략한 설명: ng-template 및 ng-container 사용

이 글에서는 Angular 템플릿의 ng-template 및 ng-container 지시어에 대해 간략하게 소개하고, ng-template 및 ng-container 지시어를 사용하는 방법을 소개합니다.

ng-template 지시문 소개

ng-template은 HTML을 렌더링하는 데 사용되는 Angular 구조 지시문입니다. 직접적으로 표시되지는 않습니다. 실제로 Angular는 뷰를 렌더링하기 전에 ng-template과 해당 내용을 주석으로 대체합니다. [관련 튜토리얼 추천: "angular tutorial"]

구조적 지시어를 사용하지 않고 다른 요소를 ng-template으로 감싸면 해당 요소는 보이지 않습니다.

*ngFor 및 *ngIf Angular와 같은 명령은 내부적으로 이러한 속성을 요소로 변환하고 이를 사용하여 호스트 요소를 래핑합니다.

ng-container 지시문 소개

추가 div 생성을 피하기 위해 대신 그룹화 요소인 ng-container를 사용할 수 있지만 Angular는 넣지 않기 때문에 스타일이나 요소 레이아웃을 오염시키지 않습니다. DOM에 들어가세요. ng-container는 Angular 파서가 인식하고 처리하는 구문 요소입니다. 이는 지시문, 구성 요소, 클래스 또는 인터페이스가 아니지만 JavaScript의 if 블록에 있는 중괄호와 비슷합니다.

ng-container 사용법

Usage 1 (가장 기본적인 사용법)

리스트 루프에 작성할 때 완료해야 할 몇 가지 판단이 있습니다. Angular의 구조적 지침이 허용하지 않는다는 것을 알고 있습니다. two 동시에, 이번에 추가 div를 추가하고 싶지 않다면 ng-container

<ul>
    <ng-container *ngFor="let item of list">
        <li *ngIf="item.context">{{item.context}}</li>
    </ng-container>
</ul>

Usage 2(ngSwitch와 함께 사용됨)

<ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="&#39;title&#39;">标题</ng-container>
    <ng-container *ngSwitchCase="&#39;text&#39;">内容</ng-container>
    <ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>

물론 ngSwitch도 사용할 수 있습니다. html 태그에 직접 작성하세요.

사용법 3(ng-template과 함께 사용)

템플릿과 함께 사용하여 중복 모듈 콘텐츠를 추출하거나 표시할 템플릿에 매개변수를 전달할 수 있습니다. 예를 들어, 다음 예에서는 A당에는 A당의 이름과 소개가 있고, B당에도 이러한 소개가 있으므로 공동 소개를 통합할 수 있습니다.

<div>
    <!--甲方-->
    <div>
        <div class="left">甲方：</div>
        <div class="right">
            甲方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
            <!--也可以写成这种方式-->
            <!--
            <ng-container [ngTemplateOutlet]="introduce"
                [ngTemplateOutletContext]="{data: data.partyA}">
            </ng-container>
            [ngTemplateOutlet]也可用在ng-template上
            -->
        </div>
    </div>
    <!--乙方-->
    <div>
        <div class="left">乙方：</div>
        <div class="right">
            乙方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
        </div>
    </div>
    <!--let-data="data"就是上面传进来的值-->
    <ng-template #introduce let-data="data">
        <p>合同介绍......</p>
    </ng-template>
</div>

ngTemplateOutlet은 템플릿 참조와 템플릿의 컨텍스트(예: ng-template) 객체를 정의하는 문자열이므로 템플릿 참조가 여러 개인 경우 이 방법을 사용할 수 있습니다. ngTemplateOutletContext는 연결된 컨텍스트(예: ng-template) 개체 EmbeddedViewRef입니다. 이는 로컬 템플릿 let에 의해 선언된 바인딩에 사용할 수 있는 키를 가진 객체여야 합니다. 컨텍스트(예: ng-template) 개체에서 $implicit 키를 사용하면 해당 값이 기본값으로 설정됩니다. ngTemplateOutlet은 외부에서 전달된 템플릿에도 사용할 수 있습니다

child.comComponent.html

<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>

child.comComponent.ts

@Input() tplRef: TemplateRef<any>

ng-템플릿 사용법

Usage one

*와 결합 ngIf를 사용하면 두 가지 다른 판단 조건을 추가할 필요가 없으며 html

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暂无数据</div>
</ng-template>

에서 직접 if else 문을 사용할 수 있습니다. 사용법 2

antd의 modalService를 사용하여 페이지에 대화 상자를 만들 때 , 템플릿을 HTML로 작성하고 참조로 로드한 다음 모달의 nzContent에 넣을 수 있습니다(약간 혼란스럽습니다. 코드를 보세요)

<ng-tempalte #content>xxxxxxx</ng-template>

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild(&#39;content&#39;) contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: &#39;标题&#39;,
            nzContent: this.contentTpl
        })
    }
}

Usage three

구성 요소에 입력으로 전달합니다. 이 구성 요소를 사용할 때 원하는 것을 작성할 수 있도록 템플릿 형태의 변수 예를 들어 아직 데이터가 없는 공유 구성 요소를 작성하는 경우 일반적으로 일부 특수한 경우에는 몇 가지 새 버튼을 추가해야 할 수도 있습니다.

empty.comComponent.html

<div>
    <img src=""/>
    <div>
        <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplate(text)"
                [ngTemplateOutlet]="text"
            ></ng-container>
        </ng-container>
        {{text || &#39;&#39;}}
    </div>
</div>

empty.comComponent.ts

export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

요약하면 제가 지금 알고 있는 가장 기본적인 사용법은 이렇습니다. 추가를 환영합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular 템플릿 지시문에 대한 간략한 설명: ng-template 및 ng-container 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!