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

我正在用Angular 2在NativeScript中编写一个应用程序

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

e、 g.在我的

test.component.ts

中，html布局文件读取

。然后我只需调用

——这非常有效，并创建了我想要的视图，但显然，我希望组件可以重用

因此，理想情况下，我希望能够从组件中删除行和列信息，然后将测试组件包括在父组件中，如

，我已经尝试过了，但它不起作用，它只是将组件呈现在gridLayout的顶部。有没有一种方法可以达到同等的效果

更新： 所以这里有一个我尝试过的解决方案

test.component.ts： test.html：

parent.html：

---

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

我不知道NativeScript，也不确定您试图解决的实际问题是什么。这可能是你想要的。您只需在自定义组件上创建输入并将值转发到嵌入式组件（也可以在另一个方向上对

（事件）

绑定进行操作）：

@组件{(
选择器：“测试组件”，
模板：“”
...
})
类TestComponent{
@Input（）labelRow:num；
@Input（）labelCol:num；
@Input（）labelColspan:num；
}

我已经在报告中回答了你的问题。

---

您的方法是正确的-模板中只有一个输入错误（

lable

，而不是

label

）。

以下是您应该如何做到这一点。我已经验证了这一点：

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);
    }

}

import{Component，Input，AfterViewInit，ElementRef，ViewChild}来自“@angular/core”；
//用户界面
从“ui/Image”导入{Image}；
从“ui/layouts/grid layout”导入{GridLayout}；
@组成部分({
选择器：“测试”，
templateUrl:`Components/Test/Test.html`，
提供者：[]
})
导出类测试实现AfterViewInit{
@Input（）标签行：数字；
@Input（）labelCol:number；
@Input（）labelColSpan:number；
@Input（）labelRowspan:number；
@ViewChild（“元素”）元素：ElementRef；
ngAfterViewInit（）{
常量元素=this.container.nativeElement；
//GridLayout包含用于指定网格位置属性的静态方法
setRow（元素，this.labelRow）；
setColumn（元素，this.labelCol）；
GridLayout.setRowSpan（元素，this.labelRowspan）；
GridLayout.setColSpan（元素，this.labelColSpan）；
}
}

然后，测试HTML文件应如下所示：

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

---

请查看我问题的更新，我对您的解决方案的解释无效，如果我误解了您，请告诉我
<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>

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);
    }

}

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