Angular组件学习之浅析内容投影

【相关教程推荐：《angular教程》】

1. 投影一块内容

容器组件这样写

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

业务组件这样用

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

2. 投影多块内容/组件

容器组件这样写

• 使用标签锁定投影位置

• 使用class锁定投影位置

• 用自定义组件名称锁定投影位置

• 使用自定义属性锁定投影位置

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. 投影子元素

使用ng-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: TemplateRefunknown>
) {
}
}
    

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

指令需要注册哦~

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

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

6. @ViewChild & @ViewChildren

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

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

@ViewChild(HelloWorldComp)helloComp: HelloWorldComp;
      @ViewChildren(HelloWorldComp)helloComps QueryListHelloWorldComp>
    ;
    

在ngAfterViewInit()钩子执行后对直接子组件进行操作

结语

关于组件的使用我们就先写到这里了,文笔功底有限,加油了~

更多编程相关知识，请访问：编程入门！！

以上就是Angular组件学习之浅析内容投影的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！