nativescript - angular 2を使用したネイティブスクリプトの動的GridLayout

Question

私は Nativescript と Angular に非常に慣れていません。これがモバイルアプリ開発への最初の試みなので、ご容赦ください。

Angular2 と Nativescript を使用して基本的なアプリを作成しようとしています。私がやろうとしているのは、アプリの起動時に画面の下部に 3 つのボタンを表示することです (これらは初期化時に動的に作成されます)。これらのボタンのいずれかをクリックすると、この行が上に移動し、2 行目のボタンが表示されるようにします。トランジションはアニメーション化する必要があります。

私が試した最初のアプローチでは、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

    }
}

私が検討していたもう 1 つのアプローチは、テンプレートをハードコーディングし、最初の行のみを表示することです。最初の行のボタンの 1 つをタップすると、それが上に移動し、2 番目の行でフェードします。これを行うためのページ上の 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>

この件に関するヘルプとアドバイスをいただければ幸いです。

前もって感謝します！