更新

Question

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

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

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

所以我希望能够从组件中删除行和col信息，然后将测试组件包含在像<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

我已在https://github.com/wso2/product-emm中回答了您的问题。您的方法是正确的 - 模板中只有一个拼写错误（create_table :tenants do |t| # ... #t.timestamps (remove the default timestamps definition) t.integer :created_at, null: false t.integer :updated_at, null: false end而不是Tenant.create! # => SQL (0.2ms) INSERT INTO `tenants` (`created_at`, `updated_at`) VALUES (1465375595, 1465375595) # => #<Tenant id: 1, tenant_name: nil, tenant_owner_name: nil, tenant_address: nil, tenant_email: nil, pincode: nil, created_at: 1465375595, updated_at: 1465375595>）。

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

以下是另一个实际操作代码段：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;
}

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

更新

test.component.ts：

的test.html：

parent.html：

3 个答案: