Eine kurze Analyse der Inhaltsprojektion beim Lernen von Angular-Komponenten

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.

Inhalt

Die Containerkomponente wird so geschrieben

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

Die Geschäftskomponente wird so verwendet

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

2. Projizieren Sie mehrere Inhalte/Komponenten

Die Containerkomponente wird so geschrieben so

Sperren Sie die Projektion mit Tags „Position“

Verwenden Sie eine Klasse, um die Projektionsposition zu sperren
Sperren Sie die Projektionsposition mit einem benutzerdefinierten Komponentennamen
Verwenden Sie benutzerdefinierte Attribute, um die Projektionsposition zu sperren

• <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>

• So werden Geschäftskomponenten verwendet

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

Demo

3. Projektunterelemente

Verwenden Sie 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>

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>

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()Die Geschäftskomponente ist so geschrieben

rrreee

4. Bedingte Inhaltsprojektion

🎜Chinesische Website-Beschreibung:🎜 🎜🎜🎜Wenn Ihre Komponente Inhalte _🎜bedingt 🎜_ rendern oder Inhalte mehrmals rendern muss, sollten Sie die Komponente so konfigurieren, dass sie akzeptiert ein ng-template-Element, das den Inhalt enthält, der bedingt gerendert werden soll. 🎜🎜🎜🎜In diesem Fall wird die Verwendung des ng-content-Elements nicht empfohlen, da der Benutzer der Komponente den Inhalt bereitstellt, auch wenn die Komponente niemals das ng-content-Element definiert oder das ng-content-Element ist befindet sich in ngIf🎜 Innerhalb der Anweisung wird der Inhalt immer initialisiert. 🎜🎜🎜🎜Mit dem ng-template-Element können Sie die Komponente explizit dazu veranlassen, Inhalte basierend auf beliebigen gewünschten Bedingungen zu rendern und mehrmals zu rendern. Angular initialisiert den Inhalt eines ng-template-Elements erst, wenn das Element explizit gerendert wird. 🎜🎜🎜🎜🎜Verwenden Sie 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. 🎜🎜rrreee

🎜🎜5. @ContentChild & @ContentChildren🎜🎜🎜🎜🎜Verwenden Sie diese beiden Dekoratoren, um die projizierte Komponente zu bearbeiten🎜🎜🎜 Verwenden Sie Anmerkungen zum Definieren die projizierte Komponente in der Geschäftskomponente🎜🎜rrreee🎜🎜die projizierte Komponente bearbeiten, nachdem der Hook ngAfterContentInit() ausgeführt wurde🎜🎜

🎜🎜6. @ViewChild & @ViewChildren🎜🎜🎜🎜🎜Verwenden Sie diese beiden Dekoratoren, um mit Fingerverbindungen verbundene Unterkomponenten zu bearbeiten🎜🎜🎜Verwenden Sie Anmerkungen, um Unterkomponenten in Geschäftskomponenten zu definieren🎜🎜rrreee🎜🎜In 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!