nativescript动态GridLayout与角2

我是非常新的Nativescript和Angular，这是我第一次尝试移动应用程序开发，所以请耐心等待。nativescript动态GridLayout与角2

我正在尝试使用Angular2和Nativescript创建一个基本应用程序。我想要做的是在应用程序启动时在屏幕底部显示3个按钮（这些按钮是在初始化时动态创建的）。一旦你点击了这些按钮中的任何一个，我希望该行被移动并出现第二行按钮。过渡应该是动画的。

在我尝试的第一种方法中，我无法将GridLayout添加到我的DockLayout。

Home.html文件中

<DockLayout #container stretchLastChild="false"> 
</DockLayout>

的home.component.ts文件片段

export class HomePage implements OnInit { 

    @ViewChild("container") container: DockLayout; 

    constructor(private _router: Router, private page: Page) { 
     var view = new View(); 
    } 


    ngOnInit() { 
     this.page.actionBarHidden = true; 
     this.page.backgroundImage = this.page.ios ? "res://background_large_file.jpg" : "res://background_large_file"; 
     console.dir(this.container); 


     //Create the grid layout on the page 
     var bottomNav = new GridLayout(); 

     //Add the GridLayout Columns 
     bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto)); 
     bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto)); 
     bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto)); 

     //Add the GridLayout Row 
     bottomNav.addRow(new ItemSpec(1, GridUnitType.auto)); 

     //Create the buttons 
     var FButton = new Button(); 
     FButton.text = "F"; 
     var BButton = new Button(); 
     BButton.text = "B"; 
     var CButton = new Button(); 
     CButton.text= "C"; 

     //Position the buttons 
     FButton.set('row', '0'); 
     FButton.set('col', '0'); 
     BButton.set('row', '0'); 
     BButton.set('col', '1'); 
     CButton.set('row', '0'); 
     CButton.set('col', '2'); 
     bottomNav.addChild(FButton); 
     bottomNav.addChild(BButton); 
     bottomNav.addChild(CButton); 

     //Attempt to add to DockLayout container 
     --This is the part I can't get working 

    } 
}

我正在考虑将我硬编码模板，只显示第一行的另一种方法。点击第一行中的其中一个按钮，我会将它向上移动并淡入第二行。我无法获取页面上GridLayouts的引用来允许我这样做。我想我可能需要使用“let container = this.container;”但对此有点不确定。

Home.html文件中

<DockLayout #container stretchLastChild="false"> 
    <GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden"> 
     <Button text="M" row="1" col="0"></Button> 
     <Button text="F" row="1" col="1"></Button> 
     <Button text="D" row="1" col="2"></Button> 
    </GridLayout> 
    <GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial"> 
     <Button text="F" row="0" col="0" (tap)="showF()"></Button> 
     <Button text="B" row="0" col="1" (tap)="showB()"></Button> 
     <Button text="C" row="0" col="2" (tap)="showC()"></Button> 
    </GridLayout> 
</DockLayout>

的home.component.ts文件

export class HomePage implements OnInit { 
    @ViewChild("container") container: DockLayout; 

    constructor(private _router: Router, private page: Page) { 
     var view = new View(); 
    } 

    ngOnInit() { 
     this.page.actionBarHidden = true; 
    } 

    showC() { 
     let container = <View>this.container; 
     container.animate({ 
       opacity: 1, 
       duration:200 
     }); 

     console.log('in here'); 
    } 
}

最后的布局我的目标是（上按钮的新行的任何水龙头 - ＃ second_row - 将导航切换到其他页面，一旦我设置了自来水事件和路由）：

<DockLayout #container stretchLastChild="false"> 
    <GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden"> 
     <Button text="M" row="1" col="0"></Button> 
     <Button text="F" row="1" col="1"></Button> 
     <Button text="D" row="1" col="2"></Button> 
    </GridLayout> 

    <GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial"> 
     <Button text="F" row="0" col="0" (tap)="showF()"></Button> 
     <Button text="B" row="0" col="1" (tap)="showB()"></Button> 
     <Button text="C" row="0" col="2" (tap)="showC()"></Button> 
    </GridLayout> 
</DockLayout>

我将不胜感激任何他lp和关于这个问题的建议。

提前致谢！

来源

2016-06-15 sandersr