угловая - лучшая практика для использования условно разных макетов в компоненте - PullRequest
Новая
       45

угловая - лучшая практика для использования условно разных макетов в компоненте

0 голосов
/ 29 апреля 2018

Предположим, у нас есть пара компонентов, каждый из которых должен иметь разную компоновку / пользовательский интерфейс (шаблоны), обусловленные размерами дисплея.

Мое решение состоит в том, чтобы создать такой компонент: 

import {Component} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
    selector: 'ui-switcher',
    template: `
        <ng-content *ngIf="isSmall" select="mobile"></ng-content>
        <ng-content *ngIf="!isSmall" select="web"></ng-content>
`
})
export class UiSwitcherComponent {
    public isSmall: boolean;

    constructor(breakpointObserver: BreakpointObserver) {
        breakpointObserver.observe([Breakpoints.Small, Breakpoints.XSmall]).subscribe(result => {
            this.isSmall = result.matches;
        });
    }

}

и используйте его следующим образом: 

<ui-switcher>
    <web>
        <!-- a ui suited for large screens -->
    </web>

    <mobile>
        <!-- a very different ui suited for small mobile screen displays-->

    </mobile>
</ui-switcher>

Это решение может иметь некоторые подводные камни. Например, мы не можем использовать одинаковые шаблоны в разделах <mobile> и <web>. (выше мы использовали #searchInput и #searchInput2).


Что такое лучшие практики для таких ситуаций?

1 Ответ

0 голосов
/ 30 апреля 2018

В вашем примере вы просто добавляете класс CSS, если isSmall равно false. Вы можете решить эту проблему, просто имея 1 вход (не 2), и добавьте класс условно.

Таким образом, вместо условного рендеринга 2 блоков HTML, которые идентичны ... Вы визуализируете 1 блок с условным классом CSS.

Пример ниже: 

@Component({
    selector: 'ui-switcher',
    template: `
        <input class="form-control" [ngClass]="{'mr-2': !isSmall}"> 
        type="text" (keyup)="this.search(searchInput.value)">
`
})

Теперь, если ваш контент действительно изменится, и вам нужно больше, чем просто *ngIf ... Тогда хорошее решение - использовать in tamplate if...else или даже if...elseif...else .

Ссылка здесь: Как использовать * ngIf еще в Angular?

Для более условного использования класса, проверьте этот пост: Angular: условный класс с * ngClass

Надеюсь, это помогло! ;)

Обновление:

ОП ссылался на изменение, которое затронуло только класс CSS, но если вы хотите динамически загрузить компонент в блок кода ... Я бы сказал, что вы идете с ngComponentOutlet .

* +1034 * Пример: * * одна тысяча тридцать пять 
        <fieldset *ngFor="let component of components">
            <ng-container *ngComponentOutlet="component.name;
                                ngModuleFactory: dynamicComponentsModule;"></ng-container>
        </fieldset>

Хорошая особенность этого подхода в том, что вы можете создать карту, и для каждого параметра у вас есть Component, связанный с ней. Пример: * 1 039 * 

map = [
   'option1': ComponentForOption1,
   'option2': ComponentForOption2
];

Я бы предложил этот пост, который предоставляет более полный пример:

Динамический шаблон на основе значения, а не переменной с помощью ngTemplateOutlet

С этим, в этом ответе, я предоставил информацию о том, как:

  1. Динамические классы CSS
  2. Условный HTML с внутренним шаблоном if...elseif...else
  3. Динамическая загрузка компонентов
...