Maison > Article > interface Web > Parlons de la méthode de projection de contenu en angulaire
Cet article parlera de la projection de contenu dans angular, présentera la méthode d'utilisation de ng-content pour la projection de contenu et comprendra la méthode de mise en œuvre de la projection de contenu conditionnelle. J'espère que cela sera utile à tout le monde !
ng-content
pour la projection de contenung-content
进行内容投影1.1 <span style="font-size: 16px;">ng-content</span>
ng-content
元素是一个用来插入外部或者动态内容的占位符
。父组件将外部内容
传递给子组件,当 Angular
解析模板时,就会在子组件模板中 ng-content
出现的地方插入外部内容。【相关教程推荐:《angular教程》】
我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局,并且可以在许多地方使用。一般我们在封装
一些公共组件的时候经常会用到。
1.2 为什么使用内容投影
定义一个 button 组件:
button-component.ts
@Component({ selector: '[appButton]', template: ` <span class="icon-search"></span> ` }) export class AppButtonComponent {}
这个 button 组件的目的是在按钮内部加一个搜索的图标,我们实际使用如下:
<button appButton>click</button>
我们发现组件只会展示搜索图标, 按钮的文本不会展示,能你会想到最常使用的 @Input
装饰器,但是如果我们不只是想传文本进来,而是传一段 html
进来呢?此时就会用到 ng-content
。
1.3 单插槽内容投影
内容投影的最基本形式是单插槽内容投影
。
单插槽内容投影是指创建一个组件,我们可以在其中投影一个组件。
以 button 组件为例,创建一个单槽内容投影:
button-component.ts
@Component({ selector: '[appButton]', template: ` <span class="icon-search"></span> <ng-content></ng-content> ` }) export class AppButtonComponent {}
实际使用如下:
<button appButton>click</button>
可以发现,现在这个 button 组件的效果是即显示了搜索图标,又显示了按钮的文本(click)。即把 2b4ad80bee79097601321f1e5d22b32765281c5ac262bf6d81768915a4a77ac0
中间的内容 投影
到了组件的 d553bd28b5bbbbd4b6fb4990edbabbf078e68693bbc3a4be56286441c90e88e6
位置。
ng-content 元素是一个占位符,它不会创建真正的 DOM 元素。ng-content 的那些自定义属性将被忽略。
1.4 多插槽内容投影
一个组件可以具有多个插槽
,每个插槽可以指定一个 CSS 选择器
,该选择器会决定将哪些内容放入该插槽。该模式称为多插槽内容投影
。使用此模式,我们必须指定希望投影内容出现在的位置
。可以通过使用 ng-content
的 select
属性来完成此任务。
多个
ng-content
标签。ng-content 标签
,需要使用 ng-content
标签上的 select
属性作为识别。select
属性支持标签名
、属性
、CSS 类
和 :not 伪类
的任意组合。select
属性的 ng-content
标签将作为默认插槽
。所有未匹配的投影内容都会投影在该 ng-content
的位置。以 button 组件为例,创建一个多槽内容投影:
button-component.ts
@Component({ selector: '[appButton]', template: ` <span class="icon-search"></span> <ng-content select="[shuxing]"></ng-content> <ng-content select="p"></ng-content> <ng-content select=".lei"></ng-content> ` }) export class AppButtonComponent {}
实际使用如下:
<button appButton> <p>click</p> <span shuxing>me</span> <span class="lei">here</span> </button>
1.5 <span style="font-size: 16px;">ngProjectAs</span>
在某些情况下,我们需要使用 ng-container
把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf
或者 ngSwitch
等。。
在下面的例子中,我们将 header
包裹在了 ng-container
中。
@Component({ selector: 'app-card', template: ` <div class="card"> <div class="header"> <ng-content select="header"></ng-content> </div> <div class="content"> <ng-content select="content"></ng-content> </div> <div class="footer"> <ng-content select="footer"></ng-content> </div> <ng-content></ng-content> </div> ` }) export class AppCardComponent {}
使用:
<app-card> <ng-container> <header> <h1>Angular</h1> </header> </ng-container> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> </app-card>
由于 ng-container
的存在,header
部分并没有被渲染到我们想要渲染的插槽中,而是渲染到了没有提供任何 selector
的 ng-content
中。
在这种情况下,我们可以使用 ngProjectAs
属性。
在上面的 ng-container
ng-content
est utilisé pour insérer un élément externe ou Espace réservé pour le contenu dynamique. Le composant parent transmet le contenu externe
au composant enfant. Lorsque Angular
analyse le modèle, il apparaîtra dans le modèle du composant enfant où ng-content
. apparaît. Insérer du contenu externe. [Recommandation de didacticiel connexe : "🎜tutoriel angulaire🎜"]🎜🎜Nous pouvons utiliser la projection de contenu pour créer des composants réutilisables. Ces composants ont une logique et une disposition similaires et peuvent être utilisés dans de nombreux endroits. Généralement, nous l'utilisons souvent pour encapsuler
certains composants publics. 🎜🎜🎜1.2 Pourquoi utiliser la projection de contenu🎜🎜Définir un composant bouton : 🎜🎜button-component.ts
🎜<app-card> <ng-container ngProjectAs='header'> <header> <h1>Angular</h1> </header> </ng-container> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> </app-card>🎜Le but de ce composant de bouton est d'ajouter une icône de recherche à l'intérieur du bouton. Nous l'utilisons en fait comme suit : 🎜
<div> <ng-container> <p>My name is wyl.</p> <p>What is you name?</p> </ng-container> </div>🎜Nous avons constaté que le composant n'affichera que l'icône de recherche et que le texte du bouton ne le sera pas. affiché. Vous penserez au décorateur
@Input
le plus couramment utilisé, mais que se passe-t-il si nous ne voulons pas simplement transmettre du texte, mais un morceau de html
? ng-content
sera utilisé à ce moment. 🎜🎜🎜1.3 Projection de contenu à emplacement unique🎜🎜La forme la plus basique de projection de contenu est la Projection de contenu à emplacement unique code >. 🎜<blockquote>🎜La projection de contenu à emplacement unique signifie créer un composant dans lequel nous pouvons projeter un composant. 🎜</blockquote>🎜Prenez le composant bouton comme exemple pour créer une projection de contenu à emplacement unique : 🎜🎜<code>button-component.ts
🎜<div> <p>My name is wyl.</p> <p>What is you name?</p> </div>🎜L'utilisation réelle est la suivante : 🎜
<ul> <ng-container *ngFor="let item of items"> <li>{{ item .name}}</li> <li>{{ item .age}}</li> <li>{{ item .sex}}</li> </ng-container> </ul>🎜Vous peut trouver que maintenant le composant bouton L'effet est que l'icône de recherche et le texte du bouton (clic) sont affichés. Autrement dit, le contenu au milieu de
2b4ad80bee79097601321f1e5d22b32765281c5ac262bf6d81768915a4a77ac0
est projeté
sur le d553bd28b5bbbbd4b6fb4990edbabbf0d84ad0791f0a96f586a5c3761b21d321 emplacement. 🎜<blockquote>🎜ng-content est un espace réservé, il ne crée pas un véritable élément DOM. Ces propriétés personnalisées de ng-content seront ignorées. 🎜</blockquote>🎜🎜<span style="font-size: 16px;">1.4 Projection de contenu multi-slot</span>🎜🎜Un composant peut avoir <code>plusieurs emplacements
, chaque emplacement peut spécifier un sélecteur CSS
qui détermine le contenu qui entre dans cet emplacement. Ce mode est appelé Projection de contenu multi-slot
. En utilisant ce mode, nous devons spécifier où nous voulons que le contenu projeté apparaisse
. Cela peut être accompli en utilisant l'attribut select
de ng-content
. 🎜
plusieurs
ng-content
. ng-content
correspondante, vous devez utiliser select
sur le ng -content
tag > Attributs comme identifiants. select
prend en charge le nom de la balise
, la propriété
, la classe CSS
et : Toute combinaison de non-pseudo-classes
. Les balises ng-content
sans ajouter l'attribut select
serviront d'emplacement par défaut
. Tout le contenu projeté sans correspondance sera projeté à cet emplacement ng-content
. button-component.ts
🎜<ng-template> <p> In template, no attributes. </p> </ng-template> <ng-container> <p> In ng-container, no attributes. </p> </ng-container>🎜L'utilisation réelle est la suivante : 🎜
In ng-container, no attributes.🎜🎜1.5
<span style="font-size: 16px;">ngProjectAs</span>
🎜🎜Dans certains cas, nous devons ensuite utiliser ng-container
pour envelopper du contenu et le transmettre au composant. La plupart du temps, c'est parce que nous devons utiliser des directives structurelles comme ngIf
ou ngSwitch
etc. . 🎜🎜Dans l'exemple ci-dessous, nous enveloppons header
dans ng-container
. 🎜<ng-template [ngIf]="true"> <p> ngIf with a ng-template.</p> </ng-template> <ng-container *ngIf="true"> <p> ngIf with an ng-container.</p> </ng-container>🎜Utilisation : 🎜
ngIf with a ng-template. ngIf with an ng-container.🎜En raison de l'existence de
ng-container
, la partie header
n'est pas rendue dans l'emplacement que nous voulons restituer, mais est rendue dans non Fournissez n'importe quel sélecteur
dans ng-content
. ngProjectAs
. ng-container
ci-dessus le rendra comme prévu. 🎜<app-card> <ng-container ngProjectAs='header'> <header> <h1>Angular</h1> </header> </ng-container> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> </app-card>
如果你的元件需要有条件地渲染内容或多次渲染内容,则应配置该元件以接受一个 ng-template
元素,其中包含要有条件渲染的内容。
在这种情况下,不建议使用 ng-content
元素,因为只要元件的使用者提供了内容,即使该元件从未定义 ng-content
元素或该 ng-content
元素位于 ngIf
语句的内部,该内容也总会被初始化。
使用 ng-template
元素,你可以让元件根据你想要的任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template
元素之前,Angular
不会初始化
该元素的内容。
2.1 <span style="font-size: 16px;">ng-container</span>
既不是一个组件,也不是一个指令,仅仅是一个特殊的tag而已。 使用 ng-container
渲染所包含的模板内容,不包含自身。
<div> <ng-container> <p>My name is wyl.</p> <p>What is you name?</p> </ng-container> </div>
d4a8107efa96305af677e1edd4999c73
标签消失了,并没有起任何作用<div> <p>My name is wyl.</p> <p>What is you name?</p> </div>
遍历
或 if 判断
时,它可以承担一个载体
的作用<ul> <ng-container *ngFor="let item of items"> <li>{{ item .name}}</li> <li>{{ item .age}}</li> <li>{{ item .sex}}</li> </ng-container> </ul>
另外,ng
中常见错误之一的 for
和 if
不能写在同一标签上(在一个宿主元素上只能应用一个结构型指令),利用 ng-container
标签可以在实现功能的基础上减少层级的嵌套。
2.2 <span style="font-size: 16px;">ng-template</span>
先来看下面一段代码
<ng-template> <p> In template, no attributes. </p> </ng-template> <ng-container> <p> In ng-container, no attributes. </p> </ng-container>
浏览器输出结果是:
In ng-container, no attributes.
即 6efee24582b35a5bc3ecd0628f23f6da
中的内容不会显示。当在上面的模板中添加 ngIf
指令:
<ng-template [ngIf]="true"> <p> ngIf with a ng-template.</p> </ng-template> <ng-container *ngIf="true"> <p> ngIf with an ng-container.</p> </ng-container>
浏览器输出结果是:
ngIf with a ng-template. ngIf with an ng-container.
2.3 <span style="font-size: 16px;">ng-template</span>
和 <span style="font-size: 16px;">d4a8107efa96305af677e1edd4999c73</span>
的配合使用
<ng-container *ngIf="showSearchBread; else tplSearchEmpty"> 暂时搜索不到您要的数据喔 </ng-container> <ng-template #tplSearchEmpty> 快快开始获取吧! </ng-template>
2.4 <span style="font-size: 16px;">ngTemplateOutlet</span>
插入 ng-template
创建的内嵌视图。 ngTemplateOutlet
是一个结构型指令
,接收一个 TemplateRef
类型的值;
<div *ngTemplateOutlet="tpl1"></div> <ng-template #tpl1> <span>I am span in template {{title}}</span> </ng-template>
*ngTemplateOutlet = "templateRefExp; content: contentExp "
ng-template
元素的 #ID
可空参数
content
是一个对象,这个对象可以包含一个 $implicit
的 key
作为默认值, 使用时在 模板
中用 let-key
语句进行绑定
content
的非默认字段需要使用 let-templateKey=contentKey
语句进行绑定
使用如下:
@Component({ selector: 'ng-template-outlet-example', template: ` <ng-container *ngTemplateOutlet="greet"></ng-container> <hr> <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container> <hr> <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container> <hr> <ng-template #greet><span>Hello</span></ng-template> <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template> <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template> ` }) class NgTemplateOutletExample { myContext = {$implicit: 'World', localSk: 'Svet'}; }
2.5 利用 <span style="font-size: 16px;">ngTemplateOutlet</span>
进行内容投影
@Component({ selector: 'app-card', template: ` <div class="card"> <div class="header"> <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, index: otherDate }"></ng-container> </div> </div> ` }) export class AppCardComponent { @ContentChild('header', { static: true }) headerTemplate: TemplateRef<any>; public title = 'Test'; public otherDate = { auth: 'me', name: 'appCard' }; }
使用
<app-card> <ng-template #header let-label let-item="otherDate"> <h1>Angular</h1> {{label}} (Test) and {{otherDate | json}} ({auth: 'me', name: 'appCard'}) </ng-template> </app-card>
更多编程相关知识,请访问:编程教学!!
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!