Angular 구성요소 학습의 콘텐츠 프로젝션에 대한 간략한 분석

이 기사에서는 Angular 구성 요소의 콘텐츠 프로젝션을 안내합니다. 컨텐츠 프로젝션은 컴포넌트를 캡슐화할 때 매우 유용합니다

[추천 관련 튜토리얼: "angular tutorial"]

1. content

컨테이너 컴포넌트는 이렇게 작성됩니다

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

비즈니스 컴포넌트는 다음과 같이 사용됩니다

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

2. 여러 개의 컨텐츠/컴포넌트를 프로젝트화합니다

컨테이너 컴포넌트가 작성됩니다. 이렇게

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

Demo

3 프로젝트 하위 요소

ng-container를 사용하여 래핑합니다. vueng-container来包裹子元素,减少不必要的dom层,类似vue中的template

容器组件这样写

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

业务组件这样写

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

4. 有条件的内容投影

中文网的描述:

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

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

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

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

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

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

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

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

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

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

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

指令需要注册哦~

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

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

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

指令需要注册哦~

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

}

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

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

5. @ContentChild & @ContentChildren

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

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

@ContentChild(HelloWorldComp)
helloComp: HelloWorldComp;

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

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

6. @ViewChild & @ViewChildren

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

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

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

在ngAfterViewInit()의 템플릿과 유사하게 하위 요소를 추가하고 불필요한 DOM 레이어를 줄입니다.

컨테이너 구성 요소는 다음과 같이 작성됩니다

rrreee

비즈니스 구성 요소는 다음과 같이 작성됩니다

rrreee

🎜🎜4. 조건부 콘텐츠 투영🎜🎜🎜🎜🎜중국어 웹사이트 설명:🎜 🎜🎜🎜구성 요소가 _🎜조건부 🎜_ 콘텐츠를 렌더링하거나 콘텐츠를 여러 번 렌더링해야 하는 경우 구성 요소가 허용하도록 구성해야 합니다. 조건부로 렌더링할 콘텐츠가 포함된 ng-template 요소입니다. 🎜🎜🎜🎜 이 경우 ng-content 요소를 사용하지 않는 것이 좋습니다. 구성 요소 사용자가 콘텐츠를 제공하는 한 구성 요소가 ng-content 요소를 정의하지 않거나 ng-content 요소가 ngIf🎜에 위치합니다. 문 내부에서는 콘텐츠가 항상 초기화됩니다. 🎜🎜🎜🎜ng-template 요소를 사용하면 구성 요소가 원하는 조건에 따라 콘텐츠를 명시적으로 렌더링하고 여러 번 렌더링하도록 할 수 있습니다. Angular는 요소가 명시적으로 렌더링될 때까지 ng-template 요소의 내용을 초기화하지 않습니다. 🎜🎜🎜🎜🎜프로젝션 블록을 정의하려면 ng-container를 사용하세요. 🎜🎜🎜🎜🎜ngTemplateOutlet 지시어를 사용하면 ng-template 요소. 🎜🎜🎜🎜내장된 동적 명령어 <code>*ngIf를 사용하여 투영 렌더링 여부를 제어하세요. 🎜🎜🎜rrreee🎜🎜비즈니스 구성 요소에서는 ng-template을 사용하여 실제 요소를 래핑합니다. 🎜🎜🎜🎜my-hello 컴포넌트는 인쇄 상황을 관찰하기 위해 ngOnInit()에만 로그 출력을 수행합니다. 🎜rrreee🎜🎜이제 페이지가 이전처럼 원활하게 정상적으로 렌더링되지 않는다는 것을 알게 될 것입니다. 우리 논리가 아직 결탁되지 않았기 때문입니다. 계속하겠습니다. 명령어를 생성하고 NgModule에 등록해야 사용 가능해요~🎜🎜🎜🎜 명령어를 등록해야 합니다~🎜rrreee🎜🎜컴포넌트에서 표시/숨겨진 로고를 제어하는 ​​또 다른 명령어를 정의합니다🎜 🎜 🎜🎜명령어를 등록해야 합니다~🎜rrreee🎜🎜컨테이너 구성 요소에 방금 정의한 콘텐츠 명령을 선언하세요. 현재 페이지에서는 오류가 보고되지 않습니다~🎜🎜rrreee🎜🎜로그를 보면 알 수 있습니다. 컨테이너 구성 요소를 전환하고 있습니다. expanded로 표시되면 열린 상태의 my-hello 구성 요소만 초기화됩니다. 하지만 다음 ngIf는 다음과 같습니다. 페이지에서 렌더링된 콘텐츠를 볼 수 없지만 구성 요소가 실제로 초기화되었습니다. 🎜🎜rrreee

🎜🎜5. @ContentChild & @ContentChildren🎜🎜🎜🎜🎜이 두 데코레이터를 사용하여 투영된 구성 요소에서 작동🎜🎜🎜 주석을 사용하여 정의 비즈니스 구성 요소의 투영된 구성 요소🎜🎜rrreee🎜🎜ngAfterContentInit() 후크가 실행된 후 투영된 구성 요소에서 작동합니다🎜🎜

🎜🎜6. @ViewChild & @ViewChildren🎜🎜🎜🎜🎜이 두 데코레이터를 사용하여 핑거 조인된 하위 구성 요소에서 작동합니다🎜🎜🎜주석을 사용하여 비즈니스 구성 요소의 하위 구성 요소를 정의합니다🎜🎜rrreee🎜🎜 ngAfterViewInit() Hook이 실행된 후 직접 하위 컴포넌트가 작동됩니다🎜🎜🎜🎜결론🎜🎜🎜여기서는 컴포넌트 사용에 한계가 있으니 어서 쓰세요~🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Angular 구성요소 학습의 콘텐츠 프로젝션에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!