小编vis*_*hnu的帖子

使用角度2的HTML5事件处理(onfocus和onfocusout)

我有一个日期字段,我想默认删除占位符.

我正在使用javascript onfocusonfocusout事件来删除占位符.

任何人都可以帮助使用angular2指令吗?

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">
Run Code Online (Sandbox Code Playgroud)

我尝试以这种方式解决,但我遇到重置输入字段类型的问题.

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }
Run Code Online (Sandbox Code Playgroud)

angular

100
推荐指数
2
解决办法
15万
查看次数

谷歌地图不使用ionic/angular2显示

我正在使用ionic2来显示谷歌地图.但是当我运行下面的代码时,我得到空白页面.

export class NearByStoresPage {

  constructor(private nav: NavController, private confData: ConferenceData) {
    this.loadNearByOffers();
  }

  loadNearByOffers(){

    let options = {timeout: 10000, enableHighAccuracy: true};

    navigator.geolocation.getCurrentPosition(

        (position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);               

            let mapOptions = {
                center: latLng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            let map = new google.maps.Map(document.getElementById("map"), mapOptions);

            let marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              position: map.getCenter()
            });

            let content = "<h4>Information!</h4>";          

            let infoWindow = new google.maps.InfoWindow({
              content: content
            });

            google.maps.event.addListener(marker, 'click', function(){
              infoWindow.open(map, marker);
            });
        }, …
Run Code Online (Sandbox Code Playgroud)

ionic2 angular

16
推荐指数
1
解决办法
869
查看次数

使用角度2在http GET中传递参数

如何使用角度2在GET调用中发送参数我尝试了以下方式,但得到一些错误说,

Argument of type '{ params: URLSearchParams; }' is not assignable to parameter of type 'RequestOptionsArgs'.
  Object literal may only specify known properties, and 'params' does not exist in type 'RequestOptionsArgs'.
Run Code Online (Sandbox Code Playgroud)

功能调用:

import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http';
import 'rxjs/Rx';

 constructor(private nav: NavController, public http: Http) {
    onLogin(value: string): void { 
        if(this.authForm.valid) {
          this.userData.login();
          let params = '';
          let options = new RequestOptions({
              // Have to make a URLSearchParams with a query string
              params: new URLSearchParams('validateUsr=false')
          });
          this.http.get('https://itunes.apple.com/us/rss/topmovies/limit=1/json', …
Run Code Online (Sandbox Code Playgroud)

angular

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

使用Angular2禁用文本框的剪切,复制和粘贴功能的指令

我使用Angular2来限制文本框中的复制和粘贴.但是我如何编写自定义指令,以便它可以很容易地应用于所有文本字段.

以下是限制复制和粘贴功能的工作代码.

<ion-input formControlName="confirmpass" type="tel" (cut)="$event.preventDefault()" (copy)="$event.preventDefault()" (paste)="$event.preventDefault()"></ion-input>
Run Code Online (Sandbox Code Playgroud)

ionic2 angular

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

使用angular2显示/隐藏密码文本

我想根据用户点击显示/隐藏密码文本.但我收到以下错误说:

在此输入图像描述

export class App {
    password = "secret";
    show = false;

    @ContentChild(ShowHideInput) input: ShowHideInput;

    constructor(){}

    toggleShow()
    {
        this.show = !this.show;
        console.log(this.input); //undefined
        if (this.show){
            this.input.changeType("text");
        }
        else {
            this.input.changeType("password");
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

我创建的以下plunker链接.

https://plnkr.co/edit/2GK79PuPtRQNmoUbF6xC?p=preview
Run Code Online (Sandbox Code Playgroud)

angular

6
推荐指数
3
解决办法
2万
查看次数

包括离子2 /角2的公共标题栏

我有一个ionic-2标题栏,其中包含所有页面通用的主页或注销按钮和公司徽标.我如何编写一个通用函数(@Injectable()),这样就可以很容易地包含在所有页面中而不是重复代码.

<ion-header>
  <ion-navbar class="hide-border toolbar-btn-color" id="radio">
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Send Money</ion-title>
    <ion-buttons end>
      <button (click)="goHome()">
        <ion-icon ios="ios-home" md="md-home"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)

在每个打字稿文件中,我重复了一个名为gohome()的函数.有没有办法避免这个?

ionic2 angular

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

使用角度2 /离子2限制字符串的长度

如何使用angular2将电话号码字段限制为10个字符.我尝试使用ng-maxlenth,但它只在浏览器中工作,但不在Android设备中.

我找到了一个使用角度1的代码片段.但是我如何使用angular2重写相同的代码?

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 ionic3 angular

5
推荐指数
3
解决办法
2万
查看次数

angular2使用HTTP发布XML类型请求数据

我可以通过以下方式将JSON请求数据发布到服务器,但是如何使用http将XML结构化数据发布到服务器.

getAuthSeed(value) {
        let params = "{'validateUsr': 'false'}";
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('params',  params);

        let url = 'tab-api/login/'+value.username+'/seed/false';

        let options = new RequestOptions({
            method: RequestMethod.Get,
            url: url,
            headers: headers
        });

        return this.http.request(new Request(options)).map(
            result => {
                let data = result.json();
                return data;
            }
        )
    }
Run Code Online (Sandbox Code Playgroud)

示例XML请求:

<pi:ReqPay xmlns:pi="http:schema/">
  <Head ver="1.0" ts="" orgId="" msgId=""/>
  <Meta>
    <Tag name="PAYRE" value=""/>
  </Meta>
  <Txn id="" note="" custRef="" refId="" refUrl="" ts="" type="PAY|COLLECT">
   <RiskScores>
     <Score provider="ci" type="TXNRISK" value=""/>
   </RiskScores>
   <Rules>
    <Rule name="MINAMOUNT" value=""/>
   </Rules> …
Run Code Online (Sandbox Code Playgroud)

ajax ionic2 angular2-http angular

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

使用Angular 2进行反向地理编码

我正在使用Angular 2进行反向地理编码,它工作正常,但我无法使用服务(setter和getter)设置值(即城市名称)

import { ShareService } from './services/ShareService';
class ConferenceApp {
   constructor(public shareService: ShareService){
     this.getGeoLocation();

   }
    public getGeoLocation(){
          if (navigator.geolocation) {
              var options = {
                enableHighAccuracy: true
              };

              navigator.geolocation.getCurrentPosition(position=> {
                this.lat = position.coords.latitude;
                this.long = position.coords.longitude;
                let geocoder = new google.maps.Geocoder();
                let latlng = new google.maps.LatLng(this.lat, this.long);
                let request = {
                  latLng: latlng
                };   

                  geocoder.geocode(request, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      if (results[0] != null) {
                       let city = results[0].address_components[results[0].address_components.length-4].short_name;                      

                       this.shareService.setLocationDetails(city);


                      } else {
                        alert("No address available");
                      } …
Run Code Online (Sandbox Code Playgroud)

angular

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

如何使用本地(项目文件夹)安装的离子版本而不是全局版本

我有旧的离子版本,它使用-g选项全局安装。对于新项目,我安装了不带-g选项的新离子版本。

 npm install ionic@latest
Run Code Online (Sandbox Code Playgroud)

如果我尝试运行任何离子命令,它总是使用全局安装的离子版本。可以指定本地安装的版本吗?

因为,我不想更新旧项目的离子。

angularjs ionic-framework

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