Angular의 NgTemplateOutlet 지시문에 대한 이해와 사용법에 대해 이야기해 보겠습니다.

이 기사에서는 Angular의 NgTemplateOutlet 지시문을 살펴보고 구조 지시문 NgTemplateOutlet의 이해와 적용을 소개합니다.

최근 교육 프로젝트를 보다가 이런 구조적 명령어인 NgTemplateOutlet을 봤는데, 이전에 노출된 적이 없고 어떻게 사용하는지 모르겠습니다. 공식 웹사이트에서 이 API를 검색했습니다(공식 웹사이트 링크는 여기를 클릭하세요) NgTemplateOutlet这个结构性指令，但是我之前没接触过，不知道这东西是怎么用的，然后，我去官网上去搜了一下这个api（官网链接点这里）。

但是它的这个api说明我看不懂，不知道这个什么所谓的上下文对象是啥，也不知道这个let变量又是啥。然后经过我一整天的翻文档，记笔记，终于搞明白了这是什么东西了，没有搞明白的小伙伴可以参考一下我的上一篇文章：【Angular学习】关于模板输入变量（let-变量）的理解

这篇文章就只是说一下NgTemplateOutlet的用法和使用场景。【相关教程推荐：《angular教程》】

使用方法

这个api按照官网的说法是这样的：

根据一个提前备好的 TemplateRef 插入一个内嵌视图。

我给它翻译一下：使NgTemplateOutlet的宿主元素变成一个内嵌视图——这个内嵌视图是根据一个提前定义好的templateRef模板引用生成的。而宿主元素无论是什么元素，都不会被渲染出来。

我们将官网的示例改一下（因为官网的人命我看不懂）：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="one"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="two; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="three; context: myContext"></ng-container>
    <hr>

    <ng-template #one><span>Hello</span></ng-template>
    <ng-template #two let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #three let-person="lastName">My name is <span>LeBron {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: &#39;World&#39;, lastName: &#39;James&#39;};
}

一个宿主元素可以使用ngTemplateOutlet这个结构性指令，使自己变成任意的一个<ng-template></ng-template>模板生成的内嵌视图。并且可以给其设置上下文对象。然后我们在这个模板中可以使用let-变量这个模板输入变量来获取上下文对象中的值，这个模板更具灵活性。

应用场景

类似于ng-zorro这个框架的分页组件Pagination（官网链接）。如果我们对默认上一页和下一页的样式或者结构不满意，想要自己调整的话，我们可以提供一个输入属性（@Input定义的属性）,来接收一个模板，并且为其提供所必须的属性或者方法。这样的话，我们就可以在不修改组件源码的情况下实现组件的复用。

Demo

我们先定义一个子组件HeroDisplayCard，角色的展示界面

@Component({
  selector:'app-hero-display-card',
  template:`
    <h2 [style]="{textAlign:&#39;center&#39;}">角色列表</h2>
    <ul class="hero-card-box">
      <li class="hero-card-item" *ngFor="let h of heroesList">
        <p [style]="{textAlign:&#39;center&#39;}">
          角色id：{{h.id}}--
          角色名字：{{h.name}}--
          角色属性：{{h.features}}
        </p>
      </li>
    </ul>
  `,
  styles:[
    `.hero-card-box{
      width: 600px;
      margin: 10px auto;
    }
    .hero-card-item{
      list-style: none;
    }
    `
  ]
})
export class HeroDisplayCard {
  public heroesList = [
    {id:&#39;013&#39;,name:&#39;钟离&#39;,features:&#39;rock&#39;},
    {id:&#39;061&#39;,name:&#39;烟绯&#39;,features:&#39;fire&#39;},
    {id:&#39;022&#39;,name:&#39;迪奥娜&#39;,features:&#39;ice&#39;},
    {id:&#39;004&#39;,name:&#39;诺艾尔&#39;,features:&#39;rock&#39;},
  ]
}

然后将这个组件引入一个父组件当中：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card></app-hero-display-card>
  `
})
export class TemplateOutletAppDemoComponent {}

代码运行一下，效果如图：

我觉得这个li的样式实在是太丑了，而且顺序也不太对。我希望把角色属性调到角色名字之前。这样的话，如果只是单纯的通过输入属性来更改样式的话就会变得很麻烦，我们可能需要定义非常多的变量来供使用者选择，这样的话有点得不偿失。那么我们何不直接提供一个模板给使用者，我们只需要提供必要的数据就可以了。样式，排版这些自由交给使用者。

那么对于子组件HeroDisplayCard我们可以这么改：

@Component({
  selector:'app-hero-display-card',
  template:`
    <h2 [style]="{textAlign:&#39;center&#39;}">角色列表</h2>
    <ul class="hero-card-box">
      <ng-container *ngFor="let h of heroesList">
        <!-- 如果没有传入cardItemTemplate则显示默认 -->
        <li class="hero-card-item" *ngIf="!cardItemTemplate">
          <p [style]="{textAlign:&#39;center&#39;}">
            角色id：{{h.id}}--
            角色名字：{{h.name}}--
            角色属性：{{h.features}}
          </p>
        </li>
        <!-- 如果传入了自定义模板，则显示出来，鉴于angular的结构型指令不能在同一个宿主元素上的规定，于是这样写 -->
        <ng-container *ngIf="cardItemTemplate">
		  <!-- 将自定义模板的上下文对象设置为h -->
          <ng-container *ngTemplateOutlet="cardItemTemplate;context:h"></ng-container>
        </ng-container>
      </ng-container>
    </ul>
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef<any>;
  public heroesList = [ // 省略]
}

然后我们在父组件中将自定义的模板传入进去：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card [cardItemTemplate]="myCardTemplate"></app-hero-display-card>
	<!-- 将模板引用变量myCardTemplate传入子组件 -->
    <ng-template #myCardTemplate let-id="id" let-name="name" let-features="features">
      <li class="hero-card-custom-item">
        <p>角色id：<span>{{id}}</span></p>
        <p>角色属性：<span>{{features}}</span></p>
        <p>角色名字：<span>{{name}}</span></p>
      </li>
    </ng-template>
  `,
  styles:[
    //在这里写自定义模板的样式  
    `.hero-card-custom-item{
      width: 100%;
      height: 35px;
      border: 1px solid #999999;
      border-radius: 5px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin: 10px 0;
    }
    .hero-card-custom-item p {
      width: 30%;
      margin: 0;
      font-size: 20px;
      color: #666666;
    }
    .hero-card-custom-item p span {
      color: red;
    }`
  ]
})
export class TemplateOutletAppDemoComponent {}

然后运行一下，效果如图（其实还是很丑）：

总结

使用NgTemplateOutlet).

근데 API 설명이 이해가 안가는데, 소위 컨텍스트 객체가 뭔지도 모르고, let변수가 뭔지도 모르겠습니다. 그러다가 하루 종일 문서를 훑어보고 메모한 끝에 마침내 이것이 무엇인지 알게 되었습니다. 이해하지 못한 친구들은 제 마지막 기사를 참조하세요: [Angular Learning] 템플릿 입력 변수(let-variables) 이해

이 문서에서는 NgTemplateOutlet code> 사용 및 사용 시나리오에 대해서만 설명합니다. [추천 관련 튜토리얼: "<a href="https://www.php.cn/course/list/20.html" target="_blank">Angular 튜토리얼🎜"]🎜<h3 data-id="heading- 0"><strong>사용법</strong></h3>🎜 공식 웹사이트에 따르면 이 API는 다음과 같습니다. 🎜<blockquote>🎜 준비된 <code>TemplateRef 뷰를 기반으로 인라인을 삽입하세요. 🎜🎜번역하겠습니다. NgTemplateOutlet의 호스트 요소를 인라인 보기로 만듭니다. 이 인라인 보기는 사전 정의된 templateRef를 기반으로 합니다. 템플릿 참조에서 생성됩니다. 호스트 요소가 어떤 요소인지에 관계없이 렌더링되지 않습니다. 🎜🎜공식 웹사이트의 예를 바꿔보겠습니다(공식 웹사이트를 이해할 수 없기 때문에): 🎜rrreee🎜호스트 요소는 ngTemplateOutlet 구조 지시문을 사용하여 자신을 임의의 &lt로 바꿀 수 있습니다. ;ng-template>템플릿에 의해 생성된 인라인 보기입니다. 그리고 여기에 컨텍스트 개체를 설정할 수 있습니다. 그런 다음 이 템플릿의 let-variable 템플릿 입력 변수를 사용하여 컨텍스트 개체의 값을 가져올 수 있습니다. 이 템플릿은 더 유연합니다. 🎜

애플리케이션 시나리오

🎜 이 항목의 ng-zorro 페이징 구성 요소 페이지 매김과 유사 프레임워크 코드>(<a href="https://ng.ant.design/comComponents/pagination/zh" target="_blank" ref="nofollow noopener noreferrer">공식 웹사이트 링크🎜). 기본 이전 페이지와 다음 페이지의 스타일이나 구조가 만족스럽지 않고 직접 조정하려는 경우 입력 속성(@Input으로 정의된 속성)을 제공하여 템플릿을 수신하고 필요한 속성을 제공할 수 있습니다. 행동 양식. 이 경우 컴포넌트 소스 코드를 수정하지 않고도 컴포넌트를 재사용할 수 있습니다. 🎜<h4 data-id="heading-2"><strong>데모</strong></h4>🎜먼저 하위 구성 요소인 <code>HeroDisplayCard, 캐릭터의 디스플레이 인터페이스 🎜rrreee🎜를 정의하고 그런 다음 이 구성 요소는 상위 구성 요소에 도입됩니다. 🎜rrreee🎜코드를 실행하면 다음과 같은 효과가 나타납니다. 🎜🎜🎜🎜이 li 스타일이 정말 못생겼고 순서도 잘못된 것 같아요. 캐릭터 이름 앞에 캐릭터 속성을 넣고 싶습니다. 이 경우 단순히 속성을 입력하여 스타일을 변경하는 것은 매우 번거로울 수 있으며, 이는 사용자가 선택할 수 있는 많은 변수를 정의해야 할 수도 있으며 이는 이득이 없습니다. 그렇다면 사용자에게 템플릿을 직접 제공하지 않고 필요한 데이터만 제공하면 됩니다. 스타일과 레이아웃의 자유는 사용자에게 있습니다. 🎜🎜그런 다음 하위 구성 요소인 HeroDisplayCard를 다음과 같이 변경할 수 있습니다. 🎜rrreee🎜 그런 다음 사용자 정의 템플릿을 상위 구성 요소에 전달합니다. 🎜rrreee🎜 그런 다음 실행하면 효과는 아래와 같습니다. (실제로는 여전히 매우 보기 흉함): 🎜🎜🎜

요약

🎜 NgTemplateOutlet 구조 지시문을 사용하면 하위 항목의 캡슐화를 향상할 수 있습니다. 많은 수의 입력 속성을 정의해야 하므로 상위 구성 요소의 템플릿이 부풀어오르게 보입니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Angular의 NgTemplateOutlet 지시문에 대한 이해와 사용법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!