Une brève analyse de la projection de contenu dans l'apprentissage des composants angulaires

Cet article vous guidera à travers la projection de contenu dans les composants Angular. La projection de contenu est très similaire au slot dans Vue. Elle est très utile lors de l'encapsulation de composants. Faisons-en l'expérience ensemble

[Tutoriels associés recommandés : "Tutoriel angulaire"]

1. content

Le composant conteneur est écrit comme ceci

<div>
  编号1
  <ng-content></ng-content>
</div>

Le composant métier est utilisé comme ceci

<app-page-container>
	未指定投影位置的内容会被投影到无select属性的区域
</app-page-container>

2 Projeter plusieurs éléments de contenu/composant

Le composant conteneur est écrit. comme ça

• Verrouillez la projection à l'aide des balises Position

• Utilisez la classe pour verrouiller la position de la projection

• Verrouillez la position de la projection avec un nom de composant personnalisé

• Utilisez des attributs personnalisés pour verrouiller la position de la projection

<div>
  编号2
  <ng-content select="h3"></ng-content>
  <ng-content select=".my-class"></ng-content>
  <ng-content select="app-my-hello"></ng-content>
  <ng-content select="[content]"></ng-content>
</div>

C'est ainsi que les composants métier sont utilisés

<app-page-container>
  <h3>使用标签锁定投影位置</h3>
  <div class="my-class">使用class锁定投影位置</div>
  <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello>
  <div content>使用自定义属性锁定投影位置</div>
</app-page-container>

Démo

3. envelopper sous-éléments et réduisez les couches dom inutiles, similaire au modèle dans vue

Le composant conteneur est écrit comme ceci

<div>
  编号4
  <ng-content select="question"></ng-content>
</div>

ng-container来包裹子元素,减少不必要的dom层,类似vue中的template

容器组件这样写

<app-page-container>
  <ng-container>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
  </ng-container>
</app-page-container>

业务组件这样写

<div>
  编号3
  <ng-content select="[button]"></ng-content>
  <p *ngIf="expanded">
    <ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>
  </p>
</div>

4. 有条件的内容投影

中文网的描述:

• 如果你的组件需要_有条件地_渲染内容或多次渲染内容，则应配置该组件以接受一个 ng-template 元素，其中包含要有条件渲染的内容。

• 在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化。

• 使用 ng-template 元素，你可以让组件根据你想要的任何条件显式渲染内容，并可以进行多次渲染。在显式渲染 ng-template 元素之前，Angular 不会初始化该元素的内容。

使用ng-container定义我们的投影区块

• 使用ngTemplateOutlet指令来渲染ng-template元素。

• 通过内置的动态指令*ngIf来控制是否渲染投影。

<app-page-container>
  <div button>
    <button appToggle>切换</button>
  </div>
  <ng-template appContent>
    <app-my-hello>有条件的内容投影~</app-my-hello>
  </ng-template>
</app-page-container>

在业务组件中我们使用ng-template来包裹我们的实际元素。

my-hello组件只在ngOnInit()做日志输出来观察打印情况。

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appContent]',
})
export class ContentDirective {
  constructor(public templateRef: TemplateRef<unknown>) {}
}

现在你会发现页面并没有像前面那么顺利的正常渲染,因为我们的逻辑还没有串通,我们继续。创建一个指令,并在NgModule中注册,一定要注册才能用哦~

指令需要注册哦~

@Directive({
  selector: '[appToggle]',
})
export class ToggleDirective {
  @HostListener('click') toggle() {
    this.app.expanded = !this.app.expanded;
  }
  constructor(public app: PageContainerComponent) {}
}

我们再定义一个指令来控制组件中显示/隐藏的标识

指令需要注册哦~

export class PageContainerComponent implements OnInit {

  expanded: boolean = false;

  @ContentChild(ContentDirective)
  content!: ContentDirective;

}

在我们的容器组件中申明刚才定义的内容指令,页面目前不报错咯~

<div *ngIf="false">
  <ng-content *ngIf="false" select="app-my-hello"></ng-content>
</div>

通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染的内容,但组件实实在在被初始化过了。

@ContentChild(HelloWorldComp)
helloComp: HelloWorldComp;

@ContentChildren(HelloWorldComp)
helloComps: QueryList<HelloWorldComp>;

5. @ContentChild & @ContentChildren

使用这两个装饰器来对被投影的组件进行操作

使用注解在业务组件中定义被投影的组件

@ViewChild(HelloWorldComp)
helloComp: HelloWorldComp;
  
@ViewChildren(HelloWorldComp)
helloComps QueryList<HelloWorldComp>;

在ngAfterContentInit()钩子执行后对被投影组件进行操作

6. @ViewChild & @ViewChildren

使用这两个装饰器来对指接子组件进行操作

使用注解在业务组件中定义子组件

rrreee

在ngAfterViewInit()Le composant métier est écrit comme ceci

rrreee

4. Projection de contenu conditionnel

🎜🎜Description du site Web chinois :🎜 🎜🎜🎜Si votre composant doit _🎜conditionnellement 🎜_ restituer le contenu ou restituer le contenu plusieurs fois, vous devez configurer le composant pour qu'il accepte un élément ng-template contenant le contenu à rendre conditionnellement. 🎜🎜🎜🎜Dans ce cas, il n'est pas recommandé d'utiliser l'élément ng-content car tant que l'utilisateur du composant fournit le contenu, même si le composant ne définit jamais l'élément ng-content ou que l'élément ng-content est situé dans ngIf🎜 À l'intérieur de la déclaration, le contenu sera toujours initialisé. 🎜🎜🎜🎜En utilisant l'élément ng-template, vous pouvez demander au composant de restituer explicitement le contenu en fonction de toutes les conditions souhaitées et de le restituer plusieurs fois. Angular n'initialise pas le contenu d'un élément ng-template tant que l'élément n'est pas explicitement rendu. 🎜🎜🎜🎜🎜Utilisez ng-container pour définir notre bloc de projection 🎜🎜🎜🎜🎜Utilisez la directive ngTemplateOutlet pour rendre ng-template élément. 🎜🎜🎜🎜Utilisez l'instruction dynamique intégrée <code>*ngIf pour contrôler si le rendu de la projection est nécessaire. 🎜🎜🎜rrreee🎜🎜Dans le composant métier, nous utilisons ng-template pour envelopper nos éléments réels. Le composant 🎜🎜🎜🎜my-hello enregistre uniquement la sortie dans ngOnInit() pour observer la situation d'impression. 🎜rrreee🎜🎜Maintenant, vous constaterez que la page ne s'affiche pas normalement aussi facilement qu'avant, car notre logique n'a pas encore été de connivence, continuons. Créez une commande et enregistrez-la dans NgModule. Vous devez vous inscrire pour l'utiliser~🎜🎜🎜🎜La commande doit être enregistrée~🎜rrreee🎜🎜Nous définissons une autre commande pour contrôler l'affichage/le logo caché dans le composant🎜. 🎜 🎜🎜La commande doit être enregistrée~🎜rrreee🎜🎜Déclarez la commande de contenu qui vient d'être définie dans notre composant conteneur. La page ne signale actuellement pas d'erreur~🎜🎜rrreee🎜🎜Vous pouvez voir dans le journal que. nous changeons le composant conteneur Lorsqu'il est marqué avec expanded, seul le composant my-hello à l'état ouvert sera initialisé bien que le ngIf suivant. Je ne peux pas voir le contenu rendu sur la page, mais le composant a en fait été initialisé. 🎜🎜rrreee

🎜🎜5. @ContentChild & @ContentChildren🎜🎜🎜🎜🎜Utilisez ces deux décorateurs pour opérer sur le composant projeté🎜🎜🎜 Utilisez des annotations pour définir le composant projeté dans le composant métier🎜🎜rrreee🎜🎜fonctionne sur le composant projeté après l'exécution du hook ngAfterContentInit()🎜🎜

🎜🎜6. @ViewChild & @ViewChildren🎜🎜🎜🎜🎜Utilisez ces deux décorateurs pour opérer sur des sous-composants joints par doigt🎜🎜🎜Utilisez des annotations pour définir des sous-composants dans les composants métier🎜🎜rrreee🎜🎜Dans ngAfterViewInit() code> Une fois le hook exécuté, les sous-composants directs sont exploités🎜🎜🎜🎜Conclusion🎜🎜🎜Nous venons d'écrire ici sur l'utilisation des composants. Mes compétences en écriture sont limitées, alors allez~🎜.<p>Pour plus de connaissances sur la programmation, veuillez visiter : <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">Introduction à la programmation</a> ! ! </p>

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!