как сделать отзывчивые компоненты в Angular2

angular responsive-design angular2-routing angular2-directives

15399 просмотра

2 ответа

1986 Репутация автора

Я пробираюсь в Angular2. Моя цель - создать адаптивное приложение, которое загружает разные компоненты в ответ на разные медиа-запросы для ширины устройства. В моем рабочем примере есть MatchMediaService:

import { Injectable } from '@angular/core';

@Injectable()
export class MatchMediaService 
{
    constructor()
    {

    }

    rules =
    {
        print: "print",
        screen: "screen",
        phone: '(max-width: 767px)',
        tablet: '(min-width: 768px) and (max-width: 1024px)',
        desktop: '(min-width: 1025px)',
        portrait: '(orientation: portrait)',
        landscape: '(orientation: landscape)',
        retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
    };

    Check = function (mq)
    {
        if (!mq)
        {
            return;
        }

        return window.matchMedia(mq).matches;
    };

/**********************************************
    METHODS FOR CHECKING TYPE   
 **********************************************/
    IsPhone()
    {
        return window.matchMedia(this.rules.phone).matches;
    };

    IsTablet = function ()
    {
        return window.matchMedia(this.rules.tablet).matches;
    };

    IsDesktop = function ()
    {
        return window.matchMedia(this.rules.desktop).matches;
    };

    IsPortrait = function ()
    {
        return window.matchMedia(this.rules.portrait).matches;
    };

    IsLandscape = function ()
    {
        return window.matchMedia(this.rules.landscape).matches;
    };

    IsRetina = function ()
    {
        return window.matchMedia(this.rules.retina).matches;
    };


/**********************************************
    EVENT LISTENERS BY TYPE
 **********************************************/    
    OnPhone(callBack)
    {
        if (typeof callBack === 'function')
        {
            var mql: MediaQueryList = window.matchMedia(this.rules.phone);

            mql.addListener((mql: MediaQueryList) =>
            {
                if (mql.matches)
                {
                    callBack(mql);
                }
            });
        }
    };

    OnTablet(callBack)
    {
        if (typeof callBack === 'function')
        {
            var mql: MediaQueryList = window.matchMedia(this.rules.tablet);

            mql.addListener((mql: MediaQueryList) =>
            {
                if (mql.matches)
                {
                    callBack(mql);
                }
            });
        }
    };

    OnDesktop(callBack)
    {
        if (typeof callBack === 'function')
        {
            var mql: MediaQueryList = window.matchMedia(this.rules.desktop);

            mql.addListener((mql: MediaQueryList) =>
            {
                if (mql.matches)
                {
                    callBack(mql);
                }
            });
        }
    };  

    OnPortrait(callBack)
    {
        if (typeof callBack === 'function')
        {
            var mql: MediaQueryList = window.matchMedia(this.rules.portrait);

            mql.addListener((mql: MediaQueryList) =>
            {
                if (mql.matches)
                {
                    callBack(mql);
                }
            });
        }
    };  

    OnLandscape(callBack)
    {
        if (typeof callBack === 'function')
        {
            var mql: MediaQueryList = window.matchMedia(this.rules.landscape);

            mql.addListener((mql: MediaQueryList) =>
            {
                if (mql.matches)
                {
                    callBack(mql);
                }
            });
        }
    };
}

Затем внутри «родительского» компонента (HomeComponent) я использую MatchMediaService, чтобы определить, какой дочерний компонент (HomeMobileComponent или HomeDesktopComponent) загрузить, в зависимости от того, что возвращает MatchMediaService, а также события прослушивателя, которые запускаются, когда браузер изменяет размеры в разных измерениях:

import { Component, OnInit, NgZone } from '@angular/core';
import { MatchMediaService } from '../shared/services/match-media.service';
import { HomeMobileComponent } from './home-mobile.component';
import { HomeDesktopComponent } from './home-desktop.component';

@Component({
    moduleId: module.id,
    selector: 'home.component',
    templateUrl: 'home.component.html',
    providers: [ MatchMediaService ],
    directives: [ HomeMobileComponent, HomeDesktopComponent ]
})
export class HomeComponent implements OnInit 
{
    IsMobile: Boolean = false;
    IsDesktop: Boolean = false;

    constructor(
        private matchMediaService: MatchMediaService,
        private zone: NgZone        
    )
    {
        //GET INITIAL VALUE BASED ON DEVICE WIDTHS AT TIME THE APP RENDERS
        this.IsMobile = (this.matchMediaService.IsPhone() || this.matchMediaService.IsTablet());
        this.IsDesktop = (this.matchMediaService.IsDesktop());

        var that = this;


        /*---------------------------------------------------
        TAP INTO LISTENERS FOR WHEN DEVICE WIDTH CHANGES
        ---------------------------------------------------*/

        this.matchMediaService.OnPhone(
            function (mediaQueryList: MediaQueryList)
            {
                that.ShowMobile();
            }
        );

        this.matchMediaService.OnTablet(
            function (mediaQueryList: MediaQueryList)
            {
                that.ShowMobile();
            }
        );

        this.matchMediaService.OnDesktop(
            function (mediaQueryList: MediaQueryList)
            {
                that.ShowDesktop();
            }
        );
    }

    ngOnInit()
    {

    }

    ShowMobile()
    {
        this.zone.run(() =>
        { // Change the property within the zone, CD will run after
            this.IsMobile = true;
            this.IsDesktop = false;
        });
    }

    ShowDesktop()
    {
        this.zone.run(() =>
        { // Change the property within the zone, CD will run after
            this.IsMobile = false;
            this.IsDesktop = true;
        });
    }   
}
<home-mobile *ngIf="(IsMobile)"></home-mobile>
<home-desktop *ngIf="(IsDesktop)"></home-desktop>

Этот подход работает. Я могу загрузить соответствующий компонент в ответ на устройство. Это дает мне возможность настраивать компонент (контент, стиль, функциональность и т. Д.) Для устройства, обеспечивая тем самым лучший пользовательский опыт. Это также дает мне возможность настраивать таргетинг на различные компоненты для мобильных устройств, планшетов и настольных компьютеров (хотя я сосредоточен только на мобильных устройствах и компьютерах).

Есть лучший способ сделать это? Недостатком является то, что я заставляю каждый компонент состоять из родительского компонента, чтобы через MatchMediaService определить, какой дочерний компонент загрузить. Это будет масштабируемым, чтобы работать в полномасштабном приложении уровня производства? Меня очень интересуют ваши отзывы о лучшем подходе или о том, является ли этот подход приемлемым и масштабируемым для полнофункционального производственного приложения. Спасибо за ваш отзыв.

Автор: Tom Schreck Источник Размещён: 18.07.2016 04:49

Ответы (2)


4 плюса

377638 Репутация автора

Вы можете создать настраиваемую директиву о носителях *ngIfили *ngSwitchструктурную директиву, чтобы сделать ее менее повторяющейся.

https://angular.io/docs/ts/latest/guide/structural-directives.html

Автор: Günter Zöchbauer Размещён: 18.07.2016 04:52

0 плюса

51 Репутация автора

Не могли бы вы избежать всей этой логики, перенаправляя на лениво загруженные модули, т.е. мобильный, настольный компьютер, что угодно, заставив app.component перейти к маршруту соответствующего модуля на основе navigator.userAgent? С https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

мы рекомендуем искать строку «Mobi» в любом месте User Agent, чтобы обнаружить мобильное устройство

https://embed.plnkr.co/NLbyBEbNoWd9SUW7TJFS/

Автор: Robert Brower Размещён: 05.10.2017 06:51
Вопросы из категории :
32x32