Parlons de la compréhension et de l'utilisation de la directive NgTemplateOutlet dans Angular

Cet article vous fera découvrir la directive NgTemplateOutlet dans Angular et présentera la compréhension et l'application de la directive structurelle NgTemplateOutlet. J'espère qu'il vous sera utile !

Récemment, alors que je regardais un projet de formation, j'ai vu cette instruction structurelle NgTemplateOutlet, mais je n'y ai jamais été exposé auparavant et je ne sais pas comment l'utiliser. J'y suis allé, j'ai cherché cette API sur le site officiel (Lien du site officiel cliquez ici 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).

Mais je ne comprends pas la description de l'API. Je ne sais pas ce qu'est ce qu'on appelle l'objet contextuel, et je ne sais pas ce qu'est la variable let. Puis, après une journée entière passée à feuilleter des documents et à prendre des notes, j'ai finalement compris de quoi il s'agissait. Les amis qui ne l'avaient pas encore compris peuvent se référer à mon dernier article : [Angular Learning] Comprendre les variables d'entrée du modèle (let-variables)

Cet article parle uniquement de l'utilisation de NgTemplateOutlet code> et des scénarios d'utilisation. [Tutoriels associés recommandés : "<a href="https://www.php.cn/course/list/20.html" target="_blank">tutoriel angulaire🎜"]🎜<h3 data-id="heading- 0"><strong>Utilisation</strong></h3>🎜Selon le site officiel, cette API ressemble à ceci : 🎜<blockquote>🎜Insérez un inline basé sur une vue <code>TemplateRef préparée. 🎜🎜Laissez-moi le traduire : faites en sorte que l'élément hôte de NgTemplateOutlet devienne une vue en ligne - cette vue en ligne est basée sur un templateRef prédéfini Généré à partir de la référence du modèle. Quel que soit l'élément hôte, il ne sera pas rendu. 🎜🎜Changeons l'exemple sur le site officiel (car je ne comprends pas le site officiel) : 🎜rrreee🎜Un élément hôte peut utiliser la directive structurelle ngTemplateOutlet pour se transformer en n'importe quel &lt ;ng-template>La vue en ligne générée par le modèle. Et vous pouvez y définir un objet contextuel. Ensuite, nous pouvons utiliser la variable d'entrée du modèle let-variable dans ce modèle pour obtenir la valeur dans l'objet contextuel. Ce modèle est plus flexible. 🎜

Scénario d'application

🎜Similaire au composant de pagination ng-zorro Pagination de ceci framework code> (<a href="https://ng.ant.design/components/pagination/zh" target="_blank" ref="nofollow noopener noreferrer">Lien du site officiel🎜). Si nous ne sommes pas satisfaits du style ou de la structure par défaut de la page précédente et de la page suivante et que nous souhaitons les ajuster nous-mêmes, nous pouvons fournir un attribut d'entrée (attribut défini par @Input) pour recevoir un modèle et lui fournir les propriétés ou méthodes. Dans ce cas, nous pouvons réutiliser les composants sans modifier le code source du composant. 🎜<h4 data-id="heading-2"><strong>Démo</strong></h4>🎜Nous définissons d'abord un sous-composant <code>HeroDisplayCard, l'interface d'affichage du personnage 🎜rrreee🎜 et puis Ce composant est introduit dans un composant parent : 🎜rrreee🎜Exécutez le code et l'effet est comme indiqué : 🎜🎜🎜🎜Je pense que le style de ce li est vraiment moche, et l'ordre n'est pas correct. Je veux mettre les attributs du personnage avant le nom du personnage. Dans ce cas, il sera très difficile de simplement changer le style en saisissant des attributs. Nous devrons peut-être définir de nombreuses variables que les utilisateurs pourront choisir, ce qui dépasse un peu les gains. Alors pourquoi ne fournissons-nous pas directement un modèle à l'utilisateur, il nous suffit de fournir les données nécessaires. La liberté de style et de mise en page est laissée à l'utilisateur. 🎜🎜Ensuite, pour le sous-composant HeroDisplayCard nous pouvons le changer comme ceci : 🎜rrreee🎜 Ensuite, nous passons le modèle personnalisé dans le composant parent : 🎜rrreee🎜 Ensuite, exécutez-le, l'effet est comme indiqué ci-dessous (en fait, toujours Très moche) : 🎜🎜🎜

Résumé

🎜L'utilisation de la directive structurelle NgTemplateOutlet peut améliorer l'encapsulation de notre sous- composants et éviter Un grand nombre de propriétés d'entrée doivent être définies, ce qui donne un aspect gonflé au modèle du composant parent. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!