Question

我正在尝试制作动态标签。所以我使用materialize CSS在我的Angular 4应用程序中创建它，我似乎无法让它工作。我试试这个：

 <div>
      <ul class="tabs tabs-fixed-width">
        <div class="indicator" style="z-index:1; background-color: #1ABFB4 !important;"></div>
        <li *ngFor="let entry of data" class="tab"><a href="#{{entry.code}}">{{entry.code}}</a></li>
      </ul>
    </div>
    <div  *ngFor="let item of data" id="{{item.code}}" class="col s12">{{item.description}}</div>
  </div>

这会正确创建标签，但它们不会响应页面，每个标签都包含所有div，所以当我有4个标签时，我会在每个标签下获得4个描述。如何使用ngFor制作标签？

Answer 1

//制作一个如下所示的包装

import {
    Component,
    ElementRef,
    AfterViewInit,
    NgZone, 
    Input,
    Output
} from '@angular/core';

declare var $: any;

@Component({

    selector: 'tabs',

    styles: [`
        .carousel .carousel-item { 
           display: block; width: 200px; height:200px; 
           position: relative; top: 0; left: 0; 
        }
    `],

template: `<ng-content></ng-content>`
})

export class MyTabsComponent implements AfterViewInit {

$tabs: any;
@Output() onShow: EventEmitter<any> = new EventEmitter();
@Input() swipeable = false;

constructor(private el: ElementRef, private zone: NgZone) { }

ngAfterViewInit() {
    this.zone
        .runOutsideAngular(() => {

            this.$tabs = $(this.el.nativeElement);
            this.$tabs.find('ul.tabs')
                .on('click', 'a', ((tab) => {
                    this.zone.run(() => { // detect change and use
                        this.onShow.emit({ tab, tabRef: this.$tabs });
                    });
                }).bind(this))
                .tabs({// initialize your tabs outside angular
                    'responsiveThreshold': 1920,
                    'swipeable': this.swipeable

                });

        });
    }
}

//使用包装器组件并提供数据

@Component({

select: 'app-root',

template: `

<tabs (onShow)="onTabOpen($event)>
    <div>
        <ul class="tabs tabs-fixed-width">
            <div class="indicator" style="z-index:1; background-color: 
                #1ABFB4 !important;"></div>
            <li *ngFor="let entry of data" class="tab"><a [attr.href]="'#'+ 
                entry.code">{{entry.code}}</a></li>
        </ul>
    </div>
</tabs>

<div *ngFor="let item of data" [attr.id]="item.code" class="col s12">
    {{item.description}}</div> 
`
})
class AppComponent {
    data: [
       {
            code: 'first',
            description: 'I am first tab'
        },
        {
            code: 'second',
            description: 'I am second tab'
        }
    ]

    onTabOpen(event:any) {
    // do some stuff
    }
}

这对我有用，希望它也适合你！

Angular 4 MaterialiseCSS ngfor和标签

1 个答案: