首页 文章

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

提问于
浏览 次
1

我正在使用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>

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

typescript angular grid-layout nativescript

3 回答

  • 0

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

    回复于
  • 1

    这是你应该怎么做的 . 我已经验证了这个有效：

    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

    回复于
  • 1

    我不知道你试图解决的问题实际上是什么 . 这可能就是你想要的 . 您可以在自定义组件上创建输入并将值转发到嵌入式组件（也可以在 (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;
}
    回复于

相关问题