标签: ionic2

我是带有打字稿的Ionic2和Angular2的新手,我想为iOS和Android构建一个移动应用程序.下一步我想要包含一张地图并找到Leaflet,以便在GoogleMaps和OSM之间轻松改变,......

所以,我的问题始于安装:有不同的包,如npm install leaflet或npm install leaflet-map或npm install ui-leaflet更多..

其次,我不知道如何包含这些包.如果有人可以在Ionic2中为我提供一个非常简单的基本应用程序,显示传单地图,那就太棒了.

我正在开发一个Ionic 2 rc.1应用程序,我使用的是idea 2016.2.4.

项目运行正常,但IDE无法识别Promise的typescript定义,因为它似乎"不包含在tsconfig.json中"

检查错误是: Corresponding file is not included in tsconfig.json

我的tsconfig.json看起来像那样:

{
    "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

如果我从"exclude"块中删除node_modules,那么我对IDE检查没有问题,但项目运行ionic serve在lint阶段失败.

这是我的package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build", …

我在ionic2中打开一个Modal,从列表中搜索值.搜索之后,我希望在父屏幕中返回选定的值.

searchRooms(){
    let modal = this.modalCtrl.create(RoomSearch);
        modal.present();
  }

这将打开我的搜索模式,在那里我有可用房间列表.如果用户点击任何房间,那么我想将值返回到父页面.我不知道该怎么做.

从文档我觉得NavConroller.pop可以用来传回值,但我不知道如何使用它.

提前致谢.

我想知道如何回到appComponent使用选项卡时定义的rootPage .setRoot方法无法正常工作.在标签页中使用它时,不会清除导航堆栈.在"主页"上,后退按钮可见,而不是导航切换,并显示选项卡的标题.

默认情况下,页面会被缓存并留在DOM中,如果它们被导航离开但仍然在导航堆栈中(例如,push()上的退出页面).从导航堆栈中删除它们时会被破坏(在pop()或setRoot()上).

上面的陈述让我期望当我使用setRoot页面时从缓存中清除.当它在普通页面中使用但在选项卡中不可用时,这似乎是正确的.

在选项卡页面的类中,有一个函数可以在单击按钮时将根页面设置为home.

goToHome() {
 this.navCtrl.setRoot(HomePage);
}

如何确保当我们返回到homePage时,没有后退按钮,并且使用了组件的HTML模板中可用的主页标题.

我遇到的问题是我正在使用的一些浮动标签,但不是全部,这使得它更加奇怪.据我所知,我的离子项写得完全相同.以下是一些显示问题的图片.我不确定这是否是Ionic 2中的错误,或者我是否做错了.如果有任何不清楚或需要更多代码,请随时提问.

正如您所看到的,描述和照片/视频标签已经表现得像它们处于焦点时那样(它们不是),但它没有显示高光.

这是一个图像,我把它放在焦点,然后再次失焦.
一旦我这样做它就能正常工作.

我写的html:

<ion-content padding>
  <form [formGroup]="complaint" (ngSubmit)="send()">

    <ion-item>
      <ion-label floating>Description*</ion-label>
      <ion-textarea [(ngModel)]="description" type="text" formControlName="description"></ion-textarea>
    </ion-item>

    <ion-item>
      <ion-label floating>Number of completed tests*</ion-label>
      <ion-input [(ngModel)]="nrTests" type="number" formControlName="nrTests"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Photo/Video</ion-label>
      <ion-input [(ngModel)]="media" formControlName="media"></ion-input>
    </ion-item>

    <button ion-button type="submit" [disabled]="!complaint.valid">Send</button>

  </form>
</ion-content>

我的离子应用程序中有一个页面,在按钮单击时打开一个模态页面.目前,我已将variable.scss覆盖到下面的代码,以使模型覆盖页面的100%.

//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

但是,这适用于我的应用程序中的所有模型.我想在其他页面中使用一些模型,这些模型使用50%的宽度和大约80%的高度.如何自定义控件？

我熟悉Angular2,Ionic2,也许我误解了一些东西,但希望得到帮助.

我有一个名为'CurrentUser'的提供程序,用于存储和获取LocalStorage数据.

     getProfile(): any {
      this.local.get("user-profile").then((profile) => {
      var val = JSON.parse(profile);
      return val;
  });
}

这个函数getProfile()返回一个promise

如果我将此提供程序注入组件中.在从组件调用此函数时,如何在分配数据之前等待解析的承诺？

@Component({
   templateUrl: 'build/pages/book_meeting/book_meeting.html'
})
 export class BookMeetingPage implements OnInit {
 constructor(public navCtrl: NavController, private _currentUser: CurrentUser) {
}

profile: IProfile;

   ngOnInit(): any {
   this.profile = this._currentUser.getProfile();
   console.log(this.profile);//returns undefined
  }
}

问题

我不知道如何使用getUserHeaders()我当前返回的Observable的值http.get.

当前错误

Type 'Observable<void>' is not assignable to type 'Observable<Participant[]>'

预期结果

能够使用我的Observable返回方法的值getUserHeaders()作为调用中的headers属性http.而只返回http调用的Observable.

以前的代码

(使用由getUserHeaders()(不是Observable或者Promise)返回的harcoded Headers .

getAllParticipants(): Observable<Array<Participant>> {
    return this.http.get('someUrl',
                {headers: this.getUserHeaders()})
           .map(response => {
               return response.json();
        });
    });
   }

目前的代码

通过使用TypeScript的答案从Angular2中的http数据链接RxJS Observables,我来到了该flatMap方法.(注意此代码当前抛出'当前错误')

getUserHeaders(): Observable<Headers> {
        let headers: Headers = new Headers();

        return NativeStorage.getItem("user").map(
            data => {
                headers.append('API_KEY', data.json().apiKey);
                headers.append('DEVICE_ID', data.json().deviceId);
                return …

我现在能够在视图中获取对象但是我无法运行if语句.根据之前的回答,这就是我引入对象的方式.

public getPosts$(category, limit) {
  return this.cartService.getPosts(category, limit).map(response => {
    return response && response.data && response.data.children;
  };
}

ngOnInit() {
  this.getPosts$(this.category, this.limit).subscribe(cart => {
    this.cart = cart;
  }
}

我想跑,但得不到财产蔬菜.

<h2 *ngIf="cart">{{cart.vegetable}}</h2>
<h2 *ngIf="cart.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

错误是

无法读取未定义的属性'vegtable'

我试图通过安全的api请求图像.目前我已经完成了以下工作(请参阅下面我使用的所有资源.

import { AssetsService } from '../../services/AssetsService';
import { Component } from '@angular/core';

@Component({
    templateUrl: 'home.html',
})
export class HomePage {

    public img;

    constructor(
        public assets_service: AssetsService
    ) { }

    public async ionViewDidEnter() {
        this.img = await this.assets_service.picture_request('test.png');
    }
}

我的看法

<img [src]="img | safe" />

现在我已经看到了看起来很有希望的异步管道.正如您可能已经猜到的那样,我真的不想对我想通过上面使用的api请求的每个图像使用viewmodel属性.

我想picture_request直接从html视图使用异步调用.这将节省我在viewmodel中的所有管道.从我所读到的东西,像这样的东西应该工作,但只有它不可悲.

<img [src]="assets_service.picture_request('test.png') | async | safe" />

我不确定我是使用async pipe正确还是使用正确的方法.如果我不是我的方法应该是什么？任何帮助表示赞赏.仅供参考:我使用角度2与离子2结合使用.

我用过的其他资源:

我的安全管

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: …