Динамический GridLayout в nativescript с угловым 2

Question

Я очень новичок в Nativescript и Angular, и это мой первый удар в разработке мобильных приложений, поэтому, пожалуйста, несите меня.

Я пытаюсь создать базовое приложение с 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 и советы по этому вопросу.

Заранее благодарен!

Answer 1

Я предложил бы использовать анимацию NativeScript Angular translate. С его помощью вы можете подняться на первый GridLayout и показать следующий. Вы можете просмотреть мой образец проекта here. В связи с этим вы также можете ознакомиться с приведенными ниже статьями.

http://docs.nativescript.org/angular/ui/animation.html

http://docs.nativescript.org/angular/tutorial/ng-chapter-4

http://docs.nativescript.org/angular/tutorial/ng-chapter-0

Answer 2

Для первого примера, чтобы добавить свой новый GridLayout на страницу:

page.content = bottomNav;

сделать бы трюк.