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

Question

我正在使用 NativeScript 编写一个应用 Angular 2.

是否可以在父布局中定义 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

我不了解 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;
}

Answer 2

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

Answer 3

以下是您应该如何执行此操作。我已经验证了这个有效：

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。子组件可能需要用容器封装。

这是另一个实际片段：http://www.nativescriptsnacks.com/snippets/2016/06/20/child-components-gridlayout.html

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

Reusing ng2 components in different Nativescript Layout positions

grid-layout

typescript

nativescript

angular

更新：

test.component.ts:

test.html:

parent.html: