如何使用 Angular 2 创建简单的手风琴? [英] How can I create simple accordion with Angular 2?

问题描述

之前，我用这个简单的脚本来创建一个简单的手风琴

(function() {$('dl.accordion').on('click', 'dt', function() {this_= $(this);这个_.addClass("选择").下一个().slideDown(200).siblings('dd').slideUp(200);this_.siblings().removeClass("选中")});})();

还有这个 html

<dt>你几点上班?</dt><dd>我们 24/7 营业.</dd><dt>你几点上班?</dt><dd>我们 24/7 营业.</dd></dl>

现在我想创建一份用 Angular 2 编写的代码的副本.

如何在 Angular 2 中创建像上面一样的简单手风琴?

我想我必须学习渲染器、元素引用等.你能建议我应该学习的其他主题吗?

解决方案

试试这个解决方案，这很简单的手风琴:

app/accordion.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';@成分({选择器:'tp-手风琴'，模板:`<h2 class="accordion-head" (click)="onClick($event)">{{ title }}</h2><div class="accordion-body" [class.active]="active"><ng-content></ng-content>

`，样式: [`.accordion-head {光标:指针；}.accordion-body {显示:无；}.accordion-body.active {显示:块；-webkit-animation:fadeIn .3s；动画:淡入 .3 秒；}@-webkit-keyframes 淡入{从{不透明度:0;变换:比例(0)；}{ 不透明度:1;变换:比例(1)；}}@keyframes 淡入{从{不透明度:0;变换:比例(0)；}{ 不透明度:1;变换:比例(1)；}}`],})出口类手风琴{@Input() 标题:字符串；@Input() 活动:boolean = false;@Output() toggleAccordion: EventEmitter= new EventEmitter();构造函数(){}onClick(事件){event.preventDefault();this.toggleAccordion.emit(this.active);}}

app/accordion-group.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit, OnDestroy } from '@angular/core';从'./accordion.component'导入{手风琴}；@成分({选择器:'tp-accordion-group'，模板:`<ng-content></ng-content>`})导出类 AccordionGroup {@ContentChildren(Accordion) 手风琴:QueryList;私人订阅 = [];私人 _accordions = [];构造函数(){}ngAfterContentInit() {this._accordions = this.accordions;this.removeSubscriptions();this.addSubscriptions();this.accordions.changes.subscribe(rex => {this._accordions = rex;this.removeSubscriptions();this.addSubscriptions();});}添加订阅(){this._accordions.forEach(a => {让订阅 = a.toggleAccordion.subscribe(e => {this.toogleAccordion(a);});this.subscriptions.push(订阅);});}删除订阅(){this.subscriptions.forEach(sub => {sub.unsubscribe();});}工具手风琴(手风琴){如果 (!accordion.active) {this.accordions.forEach(a => a.active = false);}//设置活动手风琴手风琴.active = !accordion.active;}ngOnDestroy() {this.removeSubscriptions();}}

app/app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';从 './posts.service' 导入 { PostsService };@成分({选择器:'app-root'，模板:`<tp-accordion-group><tp-accordion *ngFor="let post of posts" [title]="post.title">{{ post.body }}</tp-手风琴></tp-accordion-group>`})导出类 AppComponent 实现 OnInit, OnDestroy {帖子 = [];私人订阅:任何；构造函数(私有postsSvc:PostsService){}ngOnInit() {this.subscription = this.postsSvc.getPosts().subscribe(res => {如果(res.length){this.posts = res.slice(0, 10);}})}ngOnDestroy() {如果(this.subscription){this.subscription.unsubscribe();}}}

app/posts.service.ts

import { Injectable } from '@angular/core';从'@angular/http' 导入 { Http };导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/catch';@Injectable()导出类 PostsService {postUrl: 'https://jsonplaceholder.typicode.com/posts';构造函数(私有http:Http){}获取帖子(){返回 this.http.get(this.postsUrl).map(res => {让 body = res.json();返回正文 ||[];}).catch(console.log);}}

在线演示:https://plnkr.co/edit/xFBllK?p=preview

文档:

• EventEmitter
• @ContentChildren
• 查询列表

Before, I use this simple script to create a simple accordion

(function() { 

    $('dl.accordion').on('click', 'dt', function() {
        this_= $(this);
        this_
            .addClass("selected")
            .next()
                .slideDown(200)
                .siblings('dd')
                    .slideUp(200);
        this_.siblings()
            .removeClass("selected")

    });
})();

And this html

<dl class="accordion">
    <dt>What are your hours?</dt>
    <dd>We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd>We are open 24/7.</dd>
</dl>

Now I want to create a copy of this code written in Angular 2.

How can I create a simple acordion like above in Angular 2?

I guess I have to learn renderer, elementRef etc. Could you suggest other topics which I should learn to create this?

解决方案

try this solution, this is very simple accordion:

app/accordion.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'tp-accordion',
  template: `
    <h2 class="accordion-head" (click)="onClick($event)">{{ title }}</h2>
    <div class="accordion-body" [class.active]="active">
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
    .accordion-head {
      cursor: pointer;
    }
    .accordion-body {
      display: none;
    }
    .accordion-body.active {
      display: block;
      -webkit-animation: fadeIn .3s;
      animation: fadeIn .3s;
    }
    @-webkit-keyframes fadeIn {
      from { opacity: 0; transform: scale(0); }
        to { opacity: 1; transform: scale(1); }
    }  
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0); }
        to { opacity: 1; transform: scale(1); }
    }
    `  
  ],
})
export class Accordion {

  @Input() title: string;

  @Input() active: boolean = false;

  @Output() toggleAccordion: EventEmitter<boolean> = new EventEmitter();

  constructor() {}

  onClick(event) {
    event.preventDefault();
    this.toggleAccordion.emit(this.active);
  }

}

app/accordion-group.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit, OnDestroy } from '@angular/core';

import { Accordion } from './accordion.component';

@Component({
  selector: 'tp-accordion-group',
  template: `
    <ng-content></ng-content>
  `
})
export class AccordionGroup {

  @ContentChildren(Accordion) accordions: QueryList<Accordion>;
  private subscriptions = [];

  private _accordions = [];

  constructor() {}

  ngAfterContentInit() {

    this._accordions = this.accordions;
    this.removeSubscriptions();
    this.addSubscriptions();

    this.accordions.changes.subscribe(rex => {
      this._accordions = rex;
      this.removeSubscriptions();
      this.addSubscriptions();
    });
  }

  addSubscriptions() {
    this._accordions.forEach(a => {
      let subscription = a.toggleAccordion.subscribe(e => {
        this.toogleAccordion(a);
      });
      this.subscriptions.push(subscription);
    });
  }

  removeSubscriptions() {
    this.subscriptions.forEach(sub => {
      sub.unsubscribe();
    });
  }

  toogleAccordion(accordion) {
    if (!accordion.active) {
      this.accordions.forEach(a => a.active = false);
    }
    // set active accordion
    accordion.active = !accordion.active;
  }

  ngOnDestroy() {
    this.removeSubscriptions();
  }

}

app/app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PostsService } from './posts.service';


@Component({
  selector: 'app-root',
  template: `
    <tp-accordion-group>
      <tp-accordion *ngFor="let post of posts" [title]="post.title">
        {{ post.body }}
      </tp-accordion>
    </tp-accordion-group>
  `
})
export class AppComponent implements OnInit, OnDestroy {

  posts = [];
  private subscription: any;

  constructor(private postsSvc: PostsService) {}

  ngOnInit() {
    this.subscription = this.postsSvc.getPosts().subscribe(res => {
      if (res.length) {
        this.posts = res.slice(0, 10);
      }
    })
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

}

app/posts.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class PostsService {
  postsUrl: 'https://jsonplaceholder.typicode.com/posts';
  constructor(private http: Http) {

  }
  getPosts() {
    return this.http.get(this.postsUrl)
      .map(res => {
        let body = res.json();
        return body || [];
      })
      .catch(console.log);
  }
}

Online demo: https://plnkr.co/edit/xFBllK?p=preview

Document:

• EventEmitter
• @ContentChildren
• QueryList

这篇关于如何使用 Angular 2 创建简单的手风琴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！