각도 2 인 nativescript의 동적 GridLayout

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.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'); 
    } 
} 

내가 목표로하고있어 최종 레이아웃 버튼의 새 행에 (모든 탭입니다 파일

<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.html을 파일 - # 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> 

나는 주제에 대한 조언과 조언.

미리 감사드립니다.

Answer 1

NativeScript Angular translate 애니메이션을 사용하는 것이 좋습니다. 그것의 도움으로 당신은 첫번째 GridLayout 위로 올라갈 수 있고 다음 것을 보여줄 수 있습니다. 내 샘플 프로젝트 here을 검토 할 수 있습니다. 관련하여 첨부 된 기사를 검토 할 수도 있습니다. 페이지에 새 GridLayout과를 추가 할 첫 번째 예를 들어 http://docs.nativescript.org/angular/tutorial/ng-chapter-0

Answer 2

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

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

:

page.content = bottomNav;

트릭을 할 것.