标签: ionic3

Ionic2/Angular2 - 读取自定义配置文件

我正在开发一个ionic2项目,我需要创建一个新的自定义JSON配置文件.我发现了一些教程来创建一个并通过http.get访问它,但我认为通过get请求调用它是很奇怪的.我希望它在根文件夹(所有配置JSON都是)中,我直接打开/读取文件.

我不知道是否可能,甚至推荐?这就是为什么我在这里张贴有一些意见和解决方案:)

谢谢

typescript ionic-framework ionic2 ionic3 angular

11
推荐指数
1
解决办法
6135
查看次数

离子离子按钮仅限图标

我是Ionic2或Ionic的新手.我设置了一个新项目,并希望在页面底部设计一个小菜单.我没有在这个项目上做任何其他事情,并试图模仿教程视频的步骤.但是当我在按钮上使用icon-only指令时,按钮的背景只会变小一些.背景不会消失.

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>
Run Code Online (Sandbox Code Playgroud)

这是我的代码.我希望你能帮助我.

ionic2 ionic3

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

Ionic - 只有在Android 5模拟器中运行时才会出现意外的令牌ILLEGAL

我正在开发一个Ionic应用程序,我面临以下问题:

Unexpected token ILLEGAL
Run Code Online (Sandbox Code Playgroud)

奇怪的是,它只发生在我用Genymotion模拟器运行Android 5和bellow时,使用离子cordova运行android.如果我在Android 6及更高版本中运行相同的代码,则应用程序可以正常运行.

控制台说问题接近'{'字符:

在此输入图像描述

我尝试重写这段代码,但它只是将错误更改为另一行,如果我删除所有空格.

这里奇怪的是它只发生在模拟器中运行时,所以我怀疑项目配置中的某些东西,比如webpack.

离子版:3.19.0 cordova-android:^ 6.2.3

这是我的package.json

{
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.0.1",
        "@angular/compiler": "5.0.1",
        "@angular/compiler-cli": "5.0.1",
        "@angular/core": "5.0.1",
        "@angular/forms": "5.0.1",
        "@angular/http": "5.0.1",
        "@angular/platform-browser": "5.0.1",
        "@angular/platform-browser-dynamic": "5.0.1",
        "@ionic-native/camera": "^4.4.2",
        "@ionic-native/core": "4.3.2",
        "@ionic-native/date-picker": "^4.4.2",
        "@ionic-native/facebook": "^4.4.2",
        "@ionic-native/globalization": "^4.4.2",
        "@ionic-native/google-plus": "^4.4.2",
        "@ionic-native/onesignal": "^4.4.2",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "^2.1.3",
        "@ngx-translate/core": "^9.0.1",
        "@ngx-translate/http-loader": "^2.0.0",
        "cordova-android": "^6.2.3",
        "cordova-plugin-camera": …
Run Code Online (Sandbox Code Playgroud)

android cordova typescript ionic-framework ionic3

11
推荐指数
1
解决办法
717
查看次数

Spring Boot 4.3.5 WebSocket与jwt授权聊天.GenericMessage中没有目的地

我正在尝试使用弹簧启动后端为移动应用程序(离子3)实现1-1聊天.似乎遇到了一些配置问题.

无法发送消息可能是因为未创建目标通道

后端:

ChatController:

@RestController
public class ChatController {
    @Autowired
    private PrivateChatService privateChatService;

    private final static Logger logger = LogManager.getLogger(ChatController.class.getName());


    @RequestMapping(value = "/chat/messages/{item_id}/chat_with/{buyer_login}", method = RequestMethod.GET, produces = "application/json")
    public ResponseEntity<String> getExistingChatMessages(@PathVariable("item_id") String itemId, @PathVariable("buyer_login") String buyerLogin) {
        List<ChatMessage> messages = privateChatService.getExistingChatMessages(itemId, buyerLogin);

        logger.info("Here get messages");
        return JSONResponseHelper.createResponse(messages, HttpStatus.OK);
    }


    @MessageMapping("/chat/{item_id}/send")
    @SendTo("/topic/chat/{item_id}/chat_with/{buyer_login}")
    public ChatMessage send(@Payload ChatMessage message,
                            @DestinationVariable("item_id") String item_id) throws Exception {
//        logger.info(principal.getName());
        logger.info(message.toString());
        logger.info(item_id);
        privateChatService.submitMessage(message);
        return message;
    }

}
Run Code Online (Sandbox Code Playgroud)

WebSocketConfig:

@Configuration
@EnableWebSocketMessageBroker
@Order(Ordered.HIGHEST_PRECEDENCE + 99)
public class …
Run Code Online (Sandbox Code Playgroud)

spring spring-boot spring-websocket ionic3

11
推荐指数
1
解决办法
935
查看次数

Ionic socialSharing插件无法在iOS上运行

Ionic社交共享插件无法在iOS上运行.错误响应返回"不可用".在Android上它按预期工作.我做错了吗?

// share functions parse accepts 'app' parameter
this.socialSharing.canShareVia(app, this.property.heading, '', '', this.property.link).then(res => {
      this.socialSharing.shareVia(app, this.property.heading, '', '', this.property.link);
}).catch(res => {
      this.gApp.hideLoading();
      this.gApp.showAlert('error', res);
});

// app name is parsed from html
<a (click)="shareVia('facebook')">facebook</a>
...    
<a (click)="shareVia('viber')">viber</a>
Run Code Online (Sandbox Code Playgroud)

cordova typescript ionic-framework cordova-plugins ionic3

11
推荐指数
1
解决办法
1641
查看次数

如何在离子2(搜索栏)中自动完成

我试图在我的搜索栏中自动完成我到目前为止所做的事情.

我有一个带有一些字符串的数组.然后我试图在我的项目中列出我能够搜索特定项目.

但我的要求是不要在列表中显示项目.我必须单击搜索栏,所有数组中的字符串应该来,我必须进行搜索.

<ion-header>

  <ion-navbar>
    <ion-title>search</ion-title>
  </ion-navbar>
  <ion-toolbar primary >
    <ion-searchbar (ionInput)="getItems($event)" autocorrect="off"></ion-searchbar>
  </ion-toolbar>

</ion-header>


<ion-content padding>

<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>  

</ion-content>
Run Code Online (Sandbox Code Playgroud)

search.ts文件的代码:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

/*
  Generated class for the SearchPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/search/search.html',
})
export class SearchPage {
private searchQuery: string = '';
  private items: string[];

  constructor(private navCtrl: NavController) { …
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 ionic3 angular

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

如何更新离子2侧菜单中的值

如何将日期从页面"转移"到side-menuIonic2中,即 - 具有app.page.html以下内容:

<ion-menu [content]="content">

    <ion-content class="menu-left">
        <!-- User profile -->
        <div text-center padding-top padding-bottom class="primary-bg menu-left">
            <a menuClose>
                <h4 light>{{userName}}</h4>
            </a>
        </div>

        <ion-list class="list-full-border">
            <button ion-item menuClose *ngFor="let page of pages" (click)="openPage(page)">
        <ion-icon item-left name="{{ page.icon }}"></ion-icon>
        {{ page.title }}
        <ion-badge color="danger" item-right *ngIf="page.count">{{ page.count }}</ion-badge>
      </button>
        </ion-list>
    </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Run Code Online (Sandbox Code Playgroud)

如何userName根据数据从页面中的操作更新值facebookLogin.page

facebookLogin.page.ts:

...
fbLogin() {
    Facebook.login(["public_profile", "email"])
      .then((resp: FacebookLoginResponse) => {

        if (resp.status === "connected") { …
Run Code Online (Sandbox Code Playgroud)

javascript typescript ionic2 ionic3 angular

10
推荐指数
1
解决办法
6633
查看次数

Ionic 3,管道共享模块,延迟加载页面

使用离子3页可以使用IonicPage和延迟加载IonicPageModule.问题是这些延迟加载的页面无法访问管道.

    Failed to navigate:  Template parse errors:
The pipe 'myPipe' could not be found ("")
Run Code Online (Sandbox Code Playgroud)

此问题描述了该问题并提供了解决方案.我唯一关心的是提出的解决方案是它需要pipes.module在所有延迟加载的页面中导入共享模块.

什么样的恢复在angulr2中引入的一个很好的功能,即导入管道只有一次app.module.ts.

我觉得应该有通过导入共享模块更好的办法pipes.moduleapp.module这样所有管道将是所有页面可见.

这里是 app.module.ts

    @NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

  ],
  providers: []
    })
    export class AppModule { }
Run Code Online (Sandbox Code Playgroud)

我们不应该使用

PipesModule.forRoot(MyApp)
Run Code Online (Sandbox Code Playgroud)

要使PipesModule所有延迟加载页面都可访问?

这是pipes.moudle.ts文件:

    @NgModule({
    declarations: [
        BreakLine,
        Hashtag,
        Translator
    ],
    imports: [

    ],
    exports: [ …
Run Code Online (Sandbox Code Playgroud)

typescript ionic3 angular

10
推荐指数
1
解决办法
5899
查看次数

Ionic 2/Ionic 3 - 垃圾收集

我正在努力更好地了解ionic2ionic3.

垃圾收集如何在离子中起作用?

  • 什么得到缓存,什么时候?
  • 我们如何清除这个缓存?
  • 我们如何为GC设置元素?
  • 我们甚至需要为GC设置元素吗?
  • 我们/我们需要为GC设置页面吗?

就像在这张图片中看到的那样(来源):

在此输入图像描述

当进入新页面时,一些内存获得G.C'd.然而,记忆仍然显着高于任何视频播放前的记忆.

garbage-collection ionic-framework ionic2 ionic3

10
推荐指数
1
解决办法
1551
查看次数

Ionic3手势捏锅和旋转在一起

我想在中创建一个可拖动/可调整大小/可旋转的组件Ionic2.pan并且pinch事件工作得很好,但rotate有一个奇怪的行为:如果我用两个手指触摸组件,但没有进行任何旋转,我仍然会得到一个rotation大约15到30度的数字,使组件旋转.我不知道这是一个已知问题还是与屏幕的灵敏度有关.我用于组件的代码是这样的:

import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
import { DomController, Gesture } from 'ionic-angular';

const defaultScale: number = 1;
const defaultRotation: number = 0;

@Component({
  selector: 'draggable',
  template: `
    <ng-content></ng-content>
  `
})
export class DraggableComponent {
  @Input()
  private position: {
    x: number;
    y: number;
  };

  @Input()
  private dimensions: {
    width: number;
    height: number;
  };

  @Input()
  private transform: {
    scale: number;
    rotation: number;
  };

  @Input()
  protected container: any; …
Run Code Online (Sandbox Code Playgroud)

rotation pan gesture pinch ionic3

10
推荐指数
0
解决办法
661
查看次数