Не могу установить маржу в Nativescript ProxyViewContainer программно - PullRequest
Новая
       23

Не могу установить маржу в Nativescript ProxyViewContainer программно

1 голос
/ 12 мая 2019

Команда angular имеет пакет angular / flex-layout , который я широко использую в своей кодовой базе.Я конвертирую многие из этих основных компонентов, которые также будут использоваться на мобильных устройствах через Nativescript, и с этой целью создал свой собственный компонент, имитирующий функциональность flex-layout.FlexboxLayout делает все, что мне нужно, чтобы этот компонент изначально , за исключением , обеспечивает механизм для размещения размеченных компонентов с равномерным зазором между ними.(ПРИМЕЧАНИЕ: Не пробел между ними, поскольку разрывы, возникающие из-за этого, не являются равномерными).По сути, flex-layout устанавливает правое поле, равное размеру зазора, если макет представляет собой строку, и нижнее поле, если макет представляет собой столбец.Вот мой код, чтобы попытаться сделать то же самое в Nativescript, который не работает для меня. 

import { Component, ElementRef, Input, ViewChild } from "@angular/core";

import { FlexboxLayout } from "tns-core-modules/ui/layouts/flexbox-layout";
import { View } from "tns-core-modules/ui/core/view/view";

@Component({
    selector: "flex-layout",
    template: `
        <FlexboxLayout
            #flexbox
            [flexDirection]="layout"
            [flexWrap]="wrap"
            [justifyContent]="justify"
            [alignItems]="align"
            [ngStyle]="{ width: width, height: height }"
        >
            <ng-content></ng-content>
        </FlexboxLayout>
    `
})
export class FlexLayoutComponent {
    @Input() layout: string = "row";
    @Input() wrap: string;
    @Input() justify: string;
    @Input() align: string = "start";
    @Input() gap: number;
    @Input() width: number;
    @Input() height: number;
    @ViewChild("flexbox") flexboxEl: ElementRef;

    ngAfterContentInit() {
        let flexbox: FlexboxLayout = <FlexboxLayout>(
            this.flexboxEl.nativeElement
        );
        if (this.gap) {
            flexbox.eachChildView((child: View) => {
                if (this.layout === "row") {
                    child.marginRight = this.gap;
                } else {
                    child.marginBottom = this.gap;
                }
                return true;
            });
        }
    }
}

Установка поля, как это, похоже, не влияет на компоненты.

ЕщеПриветственное решение - это то, в котором мне вообще не нужно создавать этот компонент.То есть я упускаю какой-то очевидный тип / параметр макета, который бы уже сделал это для меня?

ОБНОВЛЕНИЕ

Я обнаружил, что проблема ограничена дочерними объектами, которые являются ProxyViewContainers, а затем установкойполе не работает.Установка полей на родных компонентах работает нормально.Но первое - это то, что почти во всех моих случаях, так как я создаю многоцелевые (web и nativescript) компоненты.Пользовательские угловые компоненты отображаются как ProxyViewContaners, и настройка поля, кажется, не работает на них. Вот игровая площадка демонстрирующая это.Нативные компоненты получают свои поля, а ProxyViewContainers - нет.Проверка внуков этих ProxyViewContainers не является решением, потому что а) может быть более одного дочернего элемента, и я хочу, чтобы к родительскому элементу применялось только одно поле, и б) даже если это один компонент, он также, скорее всего, будетсам ProxyViewContainer!

ОБНОВЛЕНИЕ 2

Похоже, что в настоящее время это невозможно.Вы не можете напрямую стилизовать пользовательские компоненты в nativescript-angular.Я только что обнаружил нерешенную проблему , которая, я думаю, точно решит мою проблему здесь.

ОБНОВЛЕНИЕ 3

У меня есть то, что, надеюсь, пока будет исправлено.Я проверил его на игровой площадке, указанной выше, и он работает для этого простого случая.Обходной путь происходит как от проблемы, упомянутой в обновлении 2, так и от эта закрытая проблема тоже .Спасибо этим программистам за помощь.По сути, это включает в себя регистрацию элемента пользовательского компонента (через его селектор) для использования StackLayout (или любого макета, который вы хотите).Это сделано глобально, так что вы можете поместить его в модуль, где вы объявляете этот компонент, или, я думаю, в верхней части кода каждого компонента?например, 

import { registerElement } from "nativescript-angular/element-registry";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
registerElement('my-component-selector', () => StackLayout);

Сделайте это для всех пользовательских компонентов, которые вы хотите иметь возможность стилизовать.

...