Question

角度小组拥有angular/flex-layout软件包，我在代码库中广泛使用了该软件包。我正在将许多这些核心组件转换为也可以通过Nativescript在移动设备上使用，并为此创建了自己的组件来模仿flex-layout功能。 FlexboxLayout可以执行我需要该组件本机执行的所有操作，例外提供了一种机制，用于以相互之间均匀的间距分隔布局的组件。（注意：不之间的间距，因为由此产生的间隙不均匀）。基本上，如果layout是row，则flex-layout放置一个等于间隙大小的右页边距，如果layout是column，则放置一个底边距。这是我的代码，试图在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和本机脚本）组件。自定义角度分量显示为ProxyViewContaners，而边距设置似乎不适用于这些视图。 Here is a playground证明了这一点。本机组件设置其边距，而ProxyViewContainers不设置。检查这些ProxyViewContainers的孙代不是一个解决方案，因为a）可以有多个子代，并且我只希望对父代应用一个边距； b）即使它是单个组件，也很有可能ProxyViewContainer本身！

更新2

目前看来这是不可能的。您不能直接在nativescript-angular中设置自定义组件的样式。我刚刚发现一个outstanding issue，我认为它可以完全解决我的问题。

更新3

我现在有希望在功能上可以解决。我已经在上面链接的操场上对其进行了测试，并且它适用于这种简单的情况。解决方法既来自更新2中提到的问题，也来自this closed issue too中。感谢那些程序员的帮助。基本上，它涉及注册您的自定义组件元素（通过其选择器）以使用StackLayout（或所需的任何布局）。这是在全局范围内完成的，因此您可以将其放在声明该组件的模块中，或者我猜每个组件代码的顶部？例如

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

对您希望能够样式化的所有自定义组件执行此操作。

无法以编程方式在Nativescript ProxyViewContainer上设置边距

更新

更新2

更新3

0 个答案: