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>

Nach dem Login kopieren

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

  Nach dem Login kopieren
• So werden Geschäftskomponenten verwendet

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

  Nach dem Login kopieren

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>

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>

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

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

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

在ngAfterViewInit()Die Geschäftskomponente ist so geschrieben

4. Bedingte Inhaltsprojektion

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!