手风琴 https://angular.carbondesignsystem.com/?path=/story/components-accordion—basic

组件及属性

  • ibm-accordion
    • Input
      • align: start|end = end
      • skeleton: boolean = false;
  • ibm-accordion-item
    • Input
      • title: string| TemplateRef;
      • context: Object | null = null;
      • id = accordion-item-${AccordionItem.accordionItemCount}
      • skeleton = false;
    • Output
      • selected

        Tips

        ContentChildren 指令

        使用 ng-content 指令可以实现 Content Projection 内容投影，类似Vue的slot，插槽。如果存在多个 ng-content，可以通过 select 指定要投射的位置。 ``typescript @Component({ selector: 'exe-parent', template:

        Parent Component


        ` })

@Component({ selector: ‘my-app’, template: <h4>Welcome to Angular World</h4> <exe-parent> <exe-child></exe-child> </exe-parent>, })

  2. **ContentChild** 是属性装饰器，用来从通过 Content Projection 方式设置的试图中获取匹配的元素。
  4. **ContentChildren** 属性装饰器，和 ContentChild相比，就是获取匹配的多个元素，返回的结果是一个 QueryList 集合。
  6. **那 ContentChildren 和 ViewChildren 有啥区别呢？**
  8. - 在父组件的开始结束标签中间放入的 元素，成为 ContentChildren.
  9. - 在组件自己的模板中定义的内容，是组件的一部分，称为 ViewChildren.
  11. **ContentChild 和 ViewChild 区别？**
  13. - ContentChild 用于获取通过内容投影方式设置到试图中的元素。
  14. - ViewChild 用于从模板中获取匹配的元素
  15. - 在父组件的 ngAfterContentInit 生命周期中，才能获取通过 ContentChild 查询的元素
  16. - 在父组件的 ngAfterViewInit 生命周期中，才能获取通过 ViewChild 查询的元素。
  18. 相关文章
  20. - [https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/](https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/)
  21. - [https://segmentfault.com/a/1190000008707828](https://segmentfault.com/a/1190000008707828) Angular2 ContentChild & ContentChildren
  22. <a name="sbhI0"></a>
  23. ### ngTemplateOutlet/ngTemplateOutletContext 使用
  24. > [https://codesandbox.io/s/strange-bartik-9vkx8j?file=/src/app/app.component.ts](https://codesandbox.io/s/strange-bartik-9vkx8j?file=/src/app/app.component.ts) 实时尝试
  26. ```typescript
  27. @Component({
  28.   selector: '',
  29.   template: `
  30.   <!-- 
  31.     这里即实现了动态展示模板，并且 ng-container 仅仅是站位标签，
  32.     实际dom渲染后并不会有ng-container这一层显示。
  34.     <ng-container *ngTemplateOutlet="estimateTemplate" *ngTemplateOutletContext="ctx"></ng-container>
  35.   -->
  36.   <ng-container *ngTemplateOutlet="estimateTemplate; context: ctx"></ng-container>
  40.   <!-- 
  41.     注意，这里的let-xxx,这个xxx是模板中能够使用的变量
  42.     estimate 则是 ts 中定义的ctx的属性值。这个对应关系需要注意
  43.   -->
  44.   <ng-template #estimateTemplate let-lessonsCounter="estimate">
  45.     <div> Approximately {{lessonsCounter}} lessons ... </div>
  46.   </ng-template>
  47. `})
  48. export class AppoComponent {
  49.   total = 10;
  50.   ctx = { estimate: this.total }
  51. }
  54. /*
  55.  * 或者下面的方式也可以
  56.  * 上面是简写，这里是完整写法。
  57.  */
  58. @Component({
  59.   selector: "app-root",
  60.   template: `
  61.     <!-- 
  62.       这里的 $implicit 看着有点怪，不过算是固定写法，
  63.       可以看的到，还可以传入其他参数，如示例的 idx。
  64.     -->
  65.     <ng-container
  66.       [ngTemplateOutlet]="estimateTemplate"
  67.       [ngTemplateOutletContext]="{ $implicit: estimate, idx: 1 }"
  68.     ></ng-container>
  70.     <ng-template #estimateTemplate let-estimate let-position="idx">
  71.       <div>Approximately {{ estimate }} lessons ...</div>
  72.       <div>positoin = {{position}}</div>
  73.     </ng-template>
  74.   `,
  75.   styleUrls: ["./app.component.css"]
  76. })
  77. export class AppComponent {
  78.   total = 10;
  79.   estimate = 20;
  80. }

参考

@Directive({ selector:’[appChbgcolor]’ }) export class ChangeBgColorDirective { constructor(private el: ElementRef, private renderer: Renderer) { }

// 这里监听了 mouseover 事件 // 当鼠标移动到该 host 组件时，执行其中的逻辑 @HostListener(‘mouseover’) onMouseOver() { this.ChangeBgColor(‘red’) }

@HostListener(‘click’) onClick() { // click event }

@HostListener(‘mouseleave’) onMouseLeave() { // mouseleave event }

ChangeBgColor(color: string) { this.renderer.setElementStyle(this.el.nativeElement, ‘color’, color); } }

// 使用该 directive `

{{title}}

`

  1. 所以该 example 可以看出 **HostListener 指令的作用是处理来自host（托管）元素的事件**。
  3. 再来看一个 HostBinding 的 example：
  4. ```typescript
  5. // 这里使用 border 变量绑定了 host 元素的 border 属性
  6. @HostBinding('style.border') border: string;
  8. @HostListener('mouseover') onMouseOver() {
  9.   // 这里修改 border 变量的值，来达到修改 host 元素 border 属性的目的
  10.   this.border = '5px solid green'
  11. }

所以，可以看出 HostBinding 的作用就是修改 host 元素的属性。

参考

到这里我们对 accordion 组件也有了一定的了解了。

朋友你好，如果你对我的文章感兴趣，欢迎关注我的 Github (https://github.com/llccing)，或者掘金 (https://juejin.cn/user/3227821867281079)，或者语雀 (https://www.yuque.com/uov16w)，感谢你的支持！