标签: angular2-nativescript

NativeScript Angular - 在点击事件上获取 X 和 Y

我正在做一个 Nativescript-Angular-App,但遇到了问题。

用户必须单击图片上的正确位置。

我不明白如何获取简单点击的坐标。

我可以通过触摸手势(TouchGestureEventData)获取坐标,但它提供了信息流。我只想要一个数据。

  • GestureEventData 没有 GetX() 方法。
  • TouchGestureEventData 有 GetX() 方法,但我只想要第一次触摸。

我尝试过触摸:

public onTouch(args: TouchGestureEventData) {
     console.log(args.getActivePointers()[0].getX());
}
Run Code Online (Sandbox Code Playgroud)

但我得到了太多的数据(每个动作)。

有没有一种方法可以通过简单的点击来获取坐标?

谢谢!

nativescript angular2-nativescript angular

5
推荐指数
1
解决办法
2453
查看次数

ngOnInit 直到我导航到另一个组件后才运行

在我的 NativeScript 应用程序中,我将路由设置为

export const routes = [
    { path: "",  component: AppComponent},
    { path: "home", component: HomeComponent},
    { path: "login", component: LoginComponent},
    { path: "news" , component: NewsComponent}
];
Run Code Online (Sandbox Code Playgroud)

用户通过 firebase 登录后,用户会自动重定向到HomeComponent. 我应该提一下,我有一个用户服务,它从AppComponent Constuctor确定用户是否已经登录然后将他们重定向到登录或主页中被触发。

我将 console.log() 分布在整个组件中,以查看触发事件的时间,以便我可以尝试找出代码的放置位置。

import {Component, OnInit} from "@angular/core";
import {Page} from "ui/page";
import {RouterExtensions} from 'nativescript-angular/router';
import firebase = require("nativescript-plugin-firebase");

@Component ({
    selector : "home",
    templateUrl: "./pages/home/home.html",
    styleUrls: ["./pages/home/home.css"]
})
export class HomeComponent implements OnInit {

    private router;

    constructor(page: Page, router: …
Run Code Online (Sandbox Code Playgroud)

nativescript angular2-nativescript

4
推荐指数
1
解决办法
1756
查看次数

brew cask安装android-sdk

brew cask install android-idk在Mac OS X上安装android sdk()时遇到问题.我尝试将其安装为nativescript.我读过那些遇到同样问题但找不到工作解决方案的人.我试图改变java路径可能会导致问题.

这是我得到的错误:

==> Caveats
We will install android-sdk-tools, platform-tools, and build-tools for you.
You can control android sdk packages via the sdkmanager command.
You may want to add to your profile:
  'export ANDROID_SDK_ROOT=/usr/local/share/android-sdk'

This operation may take up to 10 minutes depending on your internet connection.
Please, be patient.

==> Satisfying dependencies
==> Downloading https://dl.google.com/android/repository/sdk-tools-darwin-3859397.zip
Already downloaded: /Users/jhon/Library/Caches/Homebrew/Cask/android-sdk--3859397,26.0.1.zip
==> Verifying checksum for Cask android-sdk
==> Installing Cask android-sdk
==> Warning: Failed to …
Run Code Online (Sandbox Code Playgroud)

homebrew android nativescript angular2-nativescript

4
推荐指数
1
解决办法
1万
查看次数

即使变量已初始化,Angular Nativescript 可见性也默认为 true

有没有办法在 Nativescript 中默认“隐藏”元素?

我的组件中有

export class HouseholdContactComponent{
  private isLoading = true
}
Run Code Online (Sandbox Code Playgroud)

在我的xml中

<StackLayout [visibility]="isLoading ? 'collapse' : 'visible'">
  <Label text="Hi there"></Label>
</StackLayout>
Run Code Online (Sandbox Code Playgroud)

使用此代码,屏幕会闪烁“您好”消息,然后消失。

nativescript angular2-nativescript angular

4
推荐指数
1
解决办法
1472
查看次数

NativeScript:禁用 iOS WebView 缩放控件的方法?

我试图找出一种方法来防止用户通过捏手势和双击在 iOS WebView (tns-ios 3.4.1) 上放大和缩小,基本上禁用所有缩放,就像在苹果推出之前使用的 html 元标记一样让用户决定是否要使用 iOS 10 及更高版本进行缩放。我在这里找到了一个适用于 android 的解决方案,但对于 iOS,它似乎并不那么简单。

我对这个平台很陌生,目前这可能吗?我发现 NS 最近从 UIWebView 切换到 WKWebView,我们可以从 NativeScript(*with angular)以某种方式使用allowedMagnification属性吗?

webview ios nativescript angular2-nativescript

4
推荐指数
2
解决办法
1884
查看次数

NativeScript / Angular Page.getViewById 返回“未定义”

我正在开发 NativeScript/Angular 应用程序。我是 NativeScript 的新手,正在学习基于早期版本的教程(我的是 4.1.0,不确定他们在使用什么)。有一个带有 DatePicker 元素的模式对话框。我希望它将所选日期返回给父元素。该应用程序编译并启动得很好。但是,当我尝试打开模态时,出现错误“无法设置未定义的‘年份’属性”。

HTML如下:

<StackLayout class="modal-view-style">
  <StackLayout>
    <DatePicker id="datePicker"></DatePicker>
  </StackLayout>
  <Button class="btn btn-primary btn-active" text="submit" (tap)="submit()"></Button>
</StackLayout>
Run Code Online (Sandbox Code Playgroud)

这是课程:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular/modal-dialog';
import { DatePicker } from 'tns-core-modules/ui/date-picker';
import { Page } from 'tns-core-modules/ui/page';

@Component({
  moduleId: module.id,
  templateUrl: './date-picker-modal.component.html'
})
export class DatePickerModalComponent implements OnInit {

  constructor(private params: ModalDialogParams, private page: Page) { }

  ngOnInit() { 
    let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>('datePicker');

      let currentdate: Date …
Run Code Online (Sandbox Code Playgroud)

nativescript angular2-nativescript angular

4
推荐指数
1
解决办法
3784
查看次数

如何在NativeScript中创建具有动态行数和列数的表?

我正在尝试在NativeScript应用程序中创建具有动态行数和列数的表或数据网格。我有一些产品类别以及这些类别中的某些产品。产品具有有关其所属类别的一些规格。这是图形卡类别中产品的示例JSON:

{
  "parts": [
    {
      "id": 1,
      "name": "GTX 1080",
      "stockCount": 10,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "11 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1500 MHz"
        }
      ]
    },
    {
      "id": 2,
      "name": "RX 580",
      "stockCount": 8,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "8 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1366 MHz"
        }
      ]
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

这是CPU类别中的另一个示例:

{
  "parts": [
    {
      "id": 3,
      "name": "i5 7600K",
      "stockCount": 8, …
Run Code Online (Sandbox Code Playgroud)

nativescript angular2-nativescript

4
推荐指数
2
解决办法
2676
查看次数

注入页面为空

将 angular nativescript 项目升级到 angular、typescript、tns 等的当前版本后。我收到一个运行时错误,指出:

类型错误:无法在新的 AppComponent 中将属性“actionBarHidden”设置为 null...

以前用于隐藏操作栏的代码如下所示:

import {Page} from "tns-core-modules/ui/page";

export class AppComponent implements OnInit, AfterViewInit {

    constructor(page: Page) {
        page.actionBarHidden = true;
    }
}
Run Code Online (Sandbox Code Playgroud)

为什么注入后页面为空?

nativescript angular2-nativescript

4
推荐指数
1
解决办法
580
查看次数

如何在 NativeScript &lt;Button&gt; 中使用字体图标

尝试在<Button>.

例如:

<Button class="btn btn-primary fas" text="{{'fa-film' | fonticon}} Test"></Button>
Run Code Online (Sandbox Code Playgroud)

CSS:

.fas {
  font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}
Run Code Online (Sandbox Code Playgroud)

当使用Nativescript主题,它定义font-family.btn类。如您所知,iconfonts 也依赖于此font-family

那么在上面的按钮中,如何将一个font-family应用于字符串 Test 而将另一个font-family应用于图标?

如果您使用 NativeScript Angular SASS 入门应用程序并在其中定义 .fas_app-common.scss并使用我上面的按钮,您将看到图标显示为 ?。这是因为.btn覆盖了font-family.

我可以通过为图标font-family提供更高的优先级来解决这个问题- 但这会阻止我为按钮上的文本字体设置样式。

按钮内字体图标的非原生脚本实现通过将元素(如<span>)作为子元素放置到<Button>. 示例在这里

你怎么能用 NativeScript 做到这一点<Button>

nativescript angular2-nativescript

4
推荐指数
1
解决办法
1812
查看次数

Nativescript + Angular ScrollView滚动到结束侦听器

是否有任何回调可用于识别何时ScrollView滚动到最底部?在Nativescript文档中,仅scroll提及事件,但它仅提供有关当前滚动的X或Y线的信息.不确定这个事件是否对我有帮助,因为我的ScrollView身高是动态的.

nativescript angular2-nativescript nativescript-angular angular

4
推荐指数
1
解决办法
392
查看次数