如何在Angular 2中使用Murri作为指令

问题描述

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

I need to find a way to use the murri grid seen: https://haltu.github.io/muuri/

并以这种方式进行修改-我可以将其用作角度指令

And modify it in such a way - that I could use it as an Angular Directive

推荐答案

以下是如何使用以Angular 6/7作为指令的muuri Grid的示例

Here is an example of how to use the muuri Grid using Angular 6/7 as a directive

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

You can assign the murri directive to a div which is defined as myTileGrid

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

下面是主要的murri指令类

Below is the main murri Directive class

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);
    }
}

这篇关于如何在Angular 2中使用Murri作为指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！