Dieser Artikel führt Sie durch die Inhaltsprojektion in Angular-Komponenten. Die Inhaltsprojektion ist dem Slot in Vue sehr ähnlich. Es ist sehr nützlich, wenn wir es gemeinsam erleben.
<div> 编号1 <ng-content></ng-content> </div>
<app-page-container>
未指定投影位置的内容会被投影到无select属性的区域
</app-page-container>
2. Projizieren Sie mehrere Inhalte/Komponenten
Sperren Sie die Projektion mit Tags „Position“
<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>
<app-page-container> <h3>使用标签锁定投影位置</h3> <div class="my-class">使用class锁定投影位置</div> <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello> <div content>使用自定义属性锁定投影位置</div> </app-page-container>
3. Projektunterelemente
ng-container zum Umschließen Unterelemente und reduzieren unnötige Dom-Ebenen, ähnlich der Vorlage in Vue Die Container-Komponente ist so geschrieben<div> 编号4 <ng-content select="question"></ng-content> </div>Nach dem Login kopieren
ng-container来包裹子元素,减少不必要的dom层,类似vue中的template
容器组件这样写
<app-page-container>
<ng-container ngProjectAs="question">
<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>中文网的描述:
如果你的组件需要_有条件地_渲染内容或多次渲染内容，则应配置该组件以接受一个 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>;
使用这两个装饰器来对被投影的组件进行操作
使用注解在业务组件中定义被投影的组件
@ViewChild(HelloWorldComp) helloComp: HelloWorldComp; @ViewChildren(HelloWorldComp) helloComps QueryList<HelloWorldComp>;
在ngAfterContentInit()钩子执行后对被投影组件进行操作
使用这两个装饰器来对指接子组件进行操作
使用注解在业务组件中定义子组件
rrreee在ngAfterViewInit()Die Geschäftskomponente ist so geschrieben
ng-container, um unseren Projektionsblock zu definieren. 🎜🎜🎜🎜🎜Verwenden Sie die ngTemplateOutlet-Direktive, um ng-template-Element. 🎜🎜🎜🎜Verwenden Sie die integrierte dynamische Anweisung <code>*ngIf, um zu steuern, ob die Projektion gerendert werden soll. 🎜🎜🎜rrreee🎜🎜In der Geschäftskomponente verwenden wir ng-template, um unsere eigentlichen Elemente zu verpacken. 🎜🎜🎜🎜Die my-hello-Komponente führt nur eine Protokollausgabe in ngOnInit() durch, um die Drucksituation zu beobachten. 🎜rrreee🎜🎜Jetzt werden Sie feststellen, dass die Seite nicht mehr so reibungslos gerendert wird wie zuvor, da unsere Logik noch nicht abgestimmt ist. Fahren wir fort. Erstellen Sie einen Befehl und registrieren Sie ihn in NgModule. Sie müssen sich registrieren, um ihn verwenden zu können 🎜 🎜🎜Der Befehl muss registriert werden~🎜rrreee🎜🎜Deklarieren Sie den gerade in unserer Containerkomponente definierten Inhaltsbefehl. Die Seite meldet derzeit keinen Fehler~🎜🎜rrreee🎜🎜Das können Sie dem Protokoll entnehmen Wir wechseln die Containerkomponente. Wenn expanded markiert ist, wird nur die my-hello-Komponente im geöffneten Zustand initialisiert, obwohl der folgende ngIf Der gerenderte Inhalt auf der Seite kann nicht angezeigt werden, die Komponente wurde jedoch tatsächlich initialisiert. 🎜🎜rrreeengAfterContentInit() ausgeführt wurde🎜🎜ngAfterViewInit() Code> Nachdem der Hook ausgeführt wurde, wird die direkte Unterkomponente bedient🎜🎜🎜🎜Fazit🎜🎜🎜Wir haben hier gerade über die Verwendung von Komponenten geschrieben, also komm schon~🎜<p>Weitere Kenntnisse zum Thema Programmierung finden Sie unter: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">Einführung in die Programmierung</a>! ! </p>
Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Inhaltsprojektion beim Lernen von Angular-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
Einführung in Laravel-Komponenten
Was bedeutet es, alle Cookies zu blockieren?
Was ist ^quxjg$c
Gründe, warum die Homepage nicht geändert werden kann
So implementieren Sie die CSS-Karussellfunktion
So lösen Sie das Problem, dass die IE-Verknüpfung nicht gelöscht werden kann
Verwendung von Booleschen Werten in Java
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
