标签: angular2-nativescript

在 NativeScript 应用程序中，我有两条路线如下：

{ path : "boxes" , component : BoxesPage } ,
{ path : "card" , component : CardPage } ,

在 BoxesPage 中，我试图像这样将一些东西传递给 CardPage：

constructor ( private _routerExtention : RouterExtensions , private _router : Router) {
    }

onItemTap ( _box ) {
        let navigationExtras : NavigationExtras = {
            queryParams : { 'box' : _box } ,
            fragment    : 'anchor'
        };
        this._router.navigate( [ '/card' ] , navigationExtras );
    }

然后在 CardPage 组件中：

 ngOnInit () : any {
        this.route.params.subscribe( …

我正在尝试在 Nativescript + Angular 中播放 ListView，但无法呈现定义的模板。我的 ListView 显示的是 [object Object] 而不是模板。我总是得到那个结果。如果数组中的项是字符串，则文本显示在行上，如果是对象，则坚持不显示我的模板并显示 [对象对象]。

我得到的结果是这样的：

下面是我的代码

eventos.component.ts

import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';


@Component({
  selector: "PrincipalEventosListView",
  templateUrl: "pages/principal/eventos/eventos.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class PrincipalEventosComponent  {

  public registros: Array<any>;

    constructor() {

        this.registros = [];
        this.registros.push({tipo: "Teste 1"});
        this.registros.push("String no lugar de objeto.");
        this.registros.push({tipo: "Teste 3"});
        this.registros.push(123);
        this.registros.push({tipo: "Teste 4"});
    }

}

eventos.component.html

<GridLayout>

<ListView [items]="registros">
    <template let-item="item">
        <Label [text]="item.tipo"></Label>
    </template>
</ListView>

我试图让一行按钮根据是否添加或删除其他按钮而增长和缩小。FlexboxLayout似乎最适合这项工作，但除了手动操作一段时间的宽度百分比之外，我似乎无法弄清楚如何解决这个问题。

我想我可以设置flexGrow它们，然后使用一个类visibility: collapse来基本上删除按钮。（然后在恢复正常时反转。）这有效，但变化非常瞬时。我想要某种挤压/拉伸动画。

我尝试玩动画，将比例缩小到 0，如下所示。虽然按钮似乎缩小了，但它只向自身中心收缩，并且仍然保持它占据的空间（留下一个间隙）。

我正在玩这样一个简单的例子：

<FlexboxLayout flexDirection="row">
  <Button text="1" width="25%" flexGrow="1"></Button>
  <Button text="2" width="25%" id="test-button"></Button>
  <Button text="3" width="25%" flexGrow="1"></Button>
  <Button text="4" width="25%" flexGrow="1"></Button>
</FlexboxLayout>

我尝试做这样的事情，我想缩小按钮 #2 消失：

let testButton = this.page.getViewById("test-button");
testButton.animate({
  scale: { x: 0, y: 1},
  duration: 500
});

我也尝试用关键帧来做到这一点。那似乎什么也没做。

#test-button {
  animation-name: shrink;
  animation-duration: 2s;
  animation-delay: 1s;
}


@keyframes shrink {
    from { width: 25%; }
    to { width: 0; }
}

我试图为网页做一些类似于这个答案中提到的事情，但这似乎也没有做任何事情。

我设法通过使用手动调整宽度的数据绑定使其工作setTimeout。但我想知道是否可能有其他更容易管理的路线？不禁想知道我是否在其他尝试中搞砸了一些东西。

我有一个带有用户名和密码 TextFields 的 Angular2/Nativescript 登录组件...当编辑密码 textField 时，我将 returnKeyType 设置为“done”，并期望在软键盘上按下 Done 时调用 login() 函数。在按下完成键的那一刻，键盘被解除，但登录功能没有被调用，所以我仍然需要在键盘被解除后点击登录按钮才能提交表单。当在 Nativescript 中的特定 TextField 上按下返回键时，有什么方法可以提交表单？如果是这样，我该如何实施它？我尝试了 returnPress 事件，但没有任何反应......

我的代码：

<ActionBar title="Login"></ActionBar>
<StackLayout class="page">
    <GridLayout columns="*, auto" rows="auto">
        <ActivityIndicator class="m-l-10 m-t-10 activity-indicator" [busy]="busy" [visibility]="busy ? 'visible' : 'collapse'" horizontalAlignment="left"></ActivityIndicator>
        <Button row="0" col="1" id="setIPBtn" class=" m-t-20 pull-right font-awesome" text="&#xf0ad; Settings" (tap)="setIP()"></Button>
    </GridLayout>

    <Label class="m-x-auto m-t-20 title h1 text-primary p-x-10" text="Log In" backgroundColor="blue"></Label>
    <StackLayout class="form">
        <StackLayout class="input-field">
            <Label class="body label text-left" text="Enter Username"></Label>
            <TextField class="input input-border" hint="Username" [(ngModel)]="username" autocorrect="false" autocapitalizationType="none" returnKeyType="next"></TextField>
        </StackLayout> …

应用程序组件.html

<page-router-outlet></page-router-outlet>

app.component.ts

import 'rxjs/add/operator/let';
import { Component, ViewEncapsulation } from '@angular/core';
import { EchoesState, getSidebarCollapsed$ } from './core/store';
import { Store } from '@ngrx/store';

@Component({
   selector: "ns-app",
   templateUrl: "app.component.html",
})
export class AppComponent {
  constructor(private store: Store<EchoesState>){}
}

app.module.ts

import 'nativescript-localstorage';
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import …

我想在 nativescript 应用程序中的注销按钮的 Tap() 上退出整个应用程序。我在下面的链接中提到了应用程序事件的使用。 https://docs.nativescript.org/core-concepts/application-lifecycle

我想对此有更多想法？

提前致谢..

我正在Visual Studio代码IDE中使用Nativescript-cli扩展来开发混合应用程序。在这里，我需要定期将代码库同步/提交到SVN url（例如eclipse中的SVN存储库）（例如https：/// svn / HotelAppMobile /）。

我的开发环境-1.visual studio代码IDE-版本1.12.1。2.当前框架-Nativescript-Cli（带有角的本机脚本）

我已经在Visual Studio代码中尝试了tortoise-svn-for-vscode扩展名。但是我没有任何有关如何使用此扩展程序的适当文档。

请提出任何其他扩展或想法来满足我的需求。

提前致谢。

，我尝试创建一个视图并且遇到了麻烦。我试图用 ngFor 创建一行图像，所以我不知道将在屏幕上显示的图像的执行数量，但需要它看起来像那样，如果有 3 张照片，它将在一行中，但是当第四张照片时图像将被添加，它将下降到一个新行

谢谢你

我正在使用 Firebase 插件使用 NativeScript 和 Angular 开发聊天应用程序。我正在使用 firebase 事件侦听器来侦听路径上的更改，如下所示：

firebase.addValueEventListener( (result) => {
  for(var key in result.value){
    this.posts.push(result.value[key].Message);
  }
  this.messages = this.posts;
  //am using this.messges to update the view
  this.posts=[];


  }, '/forum/messages');
}

问题是当我从我的一端发送消息时，视图会更新，但是当有人从他们的一端发送消息时，消息数组会发生变化，但除非我重新启动应用程序，否则我看不到它。这可能是什么原因造成的。

在Angular中，实际上是使用env var加载到应用程序中的，environment.ts这是cli的一部分。

在NativeScript中，这似乎不适用于NativeScript cli。

最好的方法是什么？