在不同的 Nativescript Layout 位置重用 ng2 组件

Question

我正在使用 Angular 2 在 NativeScript 中编写应用程序。

是否可以在父布局中定义 ng2 组件的位置？

例如在我的test.component.ts 中，html 布局文件读取为<Label text="-" row="6" col="2" colSpan="2"></Label>。然后我只调用<test-comp></test-comp> - 这很好用，并创建了我想要的视图，但显然，我希望组件是可重用的。

因此，理想情况下，我希望能够从组件中删除行和列信息，然后将测试组件包含在 <test-comp row="6" col="2"></test-comp> 这样的父组件中，我已经尝试过了，但它不起作用，它只是呈现我的 gridLayout 顶部的组件。有没有办法达到同等的效果？

更新：

所以这是我尝试过的解决方案...

test.component.ts:

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

@Component({
    selector: "test",
    templateUrl: `Components/Test/test.html`,
    providers: []
})

export class Test{
    @Input() labelRow: number;
    @Input() labelCol: number;
    @Input() labelColSpan: number;
    @Input() labelRowspan: number;
}

test.html:

<Image src="res://test" stretch="aspectFit" [row]="lableRow" [col]="labelCol" [colSpan]="labelColSpan" [rowSpan]="labelRowSpan6"></Image>

parent.html:

<GridLayout columns="*, *, *, *" rows="15*, 5*, 20*, 5*, 5*, 5*, 5*, 20*, 20*" width="100%" height="100%" style.backgroundColor="white">
    <test [labelRow]="2" [labelCol]="0" [labelRowSpan]="6" [labelColSpan]="2"></test>
</GridLayout>

但是，测试组件确实会显示，但它位于布局的左上角，而不是指定位置...

Answer 1

我已在issue in github 中回答了您的问题。 您的方法是正确的 - 模板中只有一个错字（lable 而不是 label）。

Answer 2

您应该这样做。我已经验证了它的工作原理：

import {Component, Input, AfterViewInit, ElementRef, ViewChild} from "@angular/core";
// UI
import {Image}                  from "ui/Image";
import {GridLayout}             from "ui/layouts/grid-layout";

@Component({
    selector: "test",
    templateUrl: `Components/Test/test.html`,
    providers: []
})

export class Test implements AfterViewInit{
    @Input() labelRow: number;
    @Input() labelCol: number;
    @Input() labelColSpan: number;
    @Input() labelRowspan: number;

    @ViewChild("element") element: ElementRef;

    ngAfterViewInit(){
       const element = <Image>this.container.nativeElement;

       // GridLayout contains static methods for assigning grid location properties
       GridLayout.setRow(element, this.labelRow);
       GridLayout.setColumn(element, this.labelCol);
       GridLayout.setRowSpan(element, this.labelRowspan);
       GridLayout.setColSpan(element, this.labelColSpan);
    }

}

您的测试 HTML 文件应如下所示：

<Image src="res://test" stretch="aspectFit" #element"></Image>

#element 将元素保存到组件中的@ViewChild 可以搜索的变量中。然后我们可以使用 AfterViewInit 挂钩，使用 GridLayout 上的静态方法将这些网格位置分配给元素。

注意一些 ui 组件看起来很挑剔...我一直在使用 StackLayout 执行此操作，而 ListView 对我来说返回 null。子组件可能需要用容器封装。

这是另一个正在运行的 sn-p：http://www.nativescriptsnacks.com/snippets/2016/06/20/child-components-gridlayout.html

Answer 3

我不了解 NativeScript，也不确定您试图解决的实际问题是什么。这可能是你想要的。您可以在自定义组件上创建输入并将值转发到嵌入式组件（也可以在 (event) 绑定的另一个方向上完成）：

@Component{(
  selector: 'test-component',
  template: '<Label text="-" [row]="lableRow" [col]="labelCol" [colSpan]="labelColSpan"></Label>'
  ...
})
class TestComponent {
  @Input() labelRow:num;
  @Input() labelCol:num;
  @Input() labelColspan:num;
}