angular - 如何在 Angular 2 中使用 murri 作为指令

Question

我需要找到一种方法来使用看到的 murri 网格：https ://haltu.github.io/muuri/

并以这样的方式修改它——我可以将它用作 Angular 指令

标签： angular

Answer 1

这是一个使用 Angular 6/7 作为指令来使用 muuri Grid 的示例

您可以将 murri 指令分配给div定义为myTileGrid

<div #grid class="grid" myTileGrid>
        <div class="grid-item" myTileGridItem *ngFor="let tile of tiles$ | async">
        </div>
</div>

下面是主要的 murri 指令类

import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
declare var Muuri: any;

@Directive({
    selector: '[myTileGrid]'
})
export class MyTileGridDirective implements OnInit, OnDestroy {
    layoutConfig = {
        items: [],
        layoutOnInit: false,
        dragEnabled: true,
        layout: {
            fillGaps: true,
            horizontal: false,
            alignRight: false,
            alignBottom: false,
            rounding: true
        },
        dragStartPredicate: {
            distance: 0,
            delay: 0,
            handle: '.tile-handle'
        },
        dragSortInterval: 0,
        dragSortPredicate: {
            threshold: 40,
            action: 'swap'
        }
    };
    layout: any;
    addItemChangeSubscription: any;

    private events: string[];
    private items: ElementRef[];
    private addItemChange = new BehaviorSubject<boolean>(false);

    constructor(private elRef: ElementRef) {
        this.events = [];
        this.items = [];
    }

    ngOnInit(): void {
        this.addItemChangeSubscription = this.addItemChange
            .pipe(
                filter(t => !!t),
                debounceTime(25)
            )
            .subscribe(t => {
                this.addItems(this.items);
                this.refresh();
            });

        this.init(this.elRef.nativeElement, true);
    }

    init(grid: ElementRef, fillGaps: boolean, sortAction: string = null, dragHandle: string = null) {
        if (dragHandle) {
            this.layoutConfig.dragStartPredicate.handle = dragHandle;
        }
        if (sortAction) {
            this.layoutConfig.dragSortPredicate.action = sortAction;
        }
        this.layoutConfig.layout.fillGaps = fillGaps;

        this.layout = new Muuri(grid, this.layoutConfig);
    }

    private addItems(items) {
        let existingItems = this.layout.getItems();
        if (existingItems && existingItems.length > 0) {
            this.layout.remove(existingItems, { layout: false });
        }

        this.layout.add(items, { layout: false });
        this.items = [];
    }

    addItem(item: ElementRef) {
        this.items.push(item);
        this.addItemChange.next(true);
    }

    on(eventName: string, action: any) {
        if (this.events.find(x => x === eventName)) {
            return;
        }

        this.layout.on(eventName, function(item, event) {
            action(item, event);
        });
        this.events.push(eventName);
    }

    destroyLayout() {
        this.events.forEach(eventName => {
            this.layout.off(eventName);
        });
        this.events = [];

        this.layout.destroy();
        this.layout = null;
    }

    refresh() {
        this.layout.refreshItems();
        this.layout.layout();
    }

    ngOnDestroy(): void {
        this.destroyLayout();
        if (this.addItemChangeSubscription) {
            this.addItemChangeSubscription.unsubscribe();
        }
    }
}

然后是项目本身：

import { Directive, ElementRef, Host, OnInit } from '@angular/core';
import { MyTileGridDirective } from './my-tile-grid.directive';

@Directive({
    selector: '[myTileGridItem]'
})
export class MyTileGridItemDirective implements OnInit {
    constructor(@Host() private tileGrid: MyTileGridDirective, private elRef: ElementRef) {}

    ngOnInit(): void {
        this.tileGrid.addItem(this.elRef.nativeElement);
    }
}