我刚刚设置了我的第一个离子2应用程序(我已经相当广泛地使用了离子1).我正在尝试使用离子原生相机预览插件.
设置很简单:
npm install -g ionic cordova
ionic start timesnap --v2
ionic platform add android
ionic platform add ios
ionic plugin add cordova-plugin-camera-preview --save
然后我将示例代码复制并粘贴到about页面中:
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
// camera options (Size and location)
let cameraRect: CameraPreviewRect = {
x: 100,
y: 100,
width: 200,
height: 200
};
// start camera
CameraPreview.startCamera(
cameraRect, // position and size of preview
'front', // default camera
true, // tap to take picture
false, // disable drag
true, …我试图使用ngModel双向绑定div的contenteditable输入内容,如下所示:
<div id="replyiput" class="btn-input" [(ngModel)]="replyContent" contenteditable="true" data-text="type..." style="outline: none;" ></div>
但它无法正常工作并发生错误:
EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''
你能告诉我应用程序Component和Page生成器之间有什么区别Ionic 3吗？看来我也可以ionViewWillLeave在组件内部使用页面生命周期钩子.所以我何时应该使用角度生命周期钩子呢？如果它是相同的那么为什么它有2个发电机？希望你能为此提供反馈.
组件生成器:
ionic generate component SubscribeTopicComponent
页面生成器:
ionic generate page LoginPage
import { Component, ViewChild} from '@angular/core';
import { Keyboard } from 'ionic-native';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
@ViewChild('input') myInput ;
constructor() {}
ionViewDidLoad() {
setTimeout(() => {
Keyboard.show() // for android
this.myInput.setFocus();
},150);
}
}
1)导入"ViewChild"
import {Component, ViewChild} from '@angular/core';
2)在html模板中创建对输入的引用:
<ion-input #focusInput></ion-input>
3)使用@ViewChild访问您刚才引用的输入组件.
@ViewChild('focusInput') myInput ;
4)触发焦点
每次加载视图/页面时,使用ionViewLoaded()方法触发它.
需要setTimeout
ionViewLoaded() {
setTimeout(() => {
Keyboard.show() // for android
this.myInput.setFocus();
},150); //a least 150ms.
}
4)在Android上显示键盘
import { Keyboard } from 'ionic-native';
调用Keyboard.show()在Android上调用键盘.
5)在iOS上显示键盘 …
所以我在Ionic 2上乱七八糟,我想知道如何禁用特定视图的后退按钮.
我正在做的是this.nav.push(SomePage);它有效,但会NavController自动为我提供一个后退按钮.如何禁用后退按钮？
注意:我知道我可以使用this.nav.setRoot(SomePage)将SomePage设置为root并且没有后退按钮,但是这不提供NavController自动执行的有用动画.
编辑:这个问题有些陈旧,但它引起了一些关注,所以我认为提及将来参考还有另一个原因你可能不想使用this.nav.setRoot以推送没有后退按钮的页面:擦除预先存在的一叠页面.因此,如果您仍希望能够在不向用户提供UI方式的情况下返回代码中的上一页,则setRoot不允许您这样做.
我开始使用Ionic 2创建我的第一个应用程序,并通过大量的试验和错误已达到一个点,没有数量的谷歌搜索可以找到任何帮助.
我正在尝试将一些NavParams传递给选项卡.NavParams在父标签页中可用:
@Page({
templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
}
}
但我似乎无法在选项卡本身中获取NavParams:
@Page({
templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
constructor(nav: NavController, params: NavParams, platform: Platform) {
this.nav = nav;
this.params = params;
this.platform = platform;
console.log(this.params); // returns NavParams {data: null}
} …Ionic 2中图像资产的最佳实践是什么？我有一堆SVG我想用作非系统图标.我发现了一些关于使用Gulp的旧技巧,但似乎Ionic团队决定将Rollup作为首选的构建工具,目前还没有关于此的文档.
有人告诉我只是添加它们www/img.有任何缺点吗？
在Ionic 2中,我想$colors从文件"[my project]\src\theme\variables.scss"中访问变量.
该文件包含:
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B
);
在一个组件中,我画一个画布.它看起来像这样:
import {Component, Input, ViewChild, ElementRef} from '@angular/core';
@Component({
selector: 'my-graph',
})
@View({
template: `<canvas #myGraph class='myGraph'
[attr.width]='_size'
[attr.height]='_size'></canvas>`,
})
export class MyGraphDiagram {
private _size: number;
// get the element with the #myGraph on it
@ViewChild("myGraph") myGraph: ElementRef;
constructor(){
this._size = 150;
}
ngAfterViewInit() { // wait for the view to init before using the element
let context: …如果我按照以下步骤创建新应用:
Rubens-MacBook-Pro:~ rlopez$ npm install -g cordova ionic
Rubens-MacBook-Pro:~ rlopez$ ionic start myApp tabs
Rubens-MacBook-Pro:~ rlopez$ cd myApp
Rubens-MacBook-Pro:myApp rlopez$ ionic platform add android@6.2.2 //6.1.x has a bug
Rubens-MacBook-Pro:myApp rlopez$ ionic build android
我得到这个输出:
> ionic-hello-world@ ionic:build /Users/rlopez/Proyectos/sfp-concursaPy
> ionic-app-scripts build
[15:13:28] ionic-app-scripts 1.1.4
[15:13:28] build dev started ...
[15:13:28] clean started ...
[15:13:28] clean finished in 3 ms
[15:13:28] copy started ...
[15:13:28] transpile started ...
[15:13:31] transpile finished in 2.96 s
[15:13:31] preprocess started ...
[15:13:31] preprocess finished …当我运行离子应用程序时ionic serve -l,得到此错误:
运行时错误
未捕获(承诺):cordova_not_available
堆
Error: Uncaught (in promise): cordova_not_available
at v (http://localhost:8100/build/polyfills.js:3:4864)
at s (http://localhost:8100/build/polyfills.js:3:4289)
at s (http://localhost:8100/build/polyfills.js:3:4112)
at http://localhost:8100/build/polyfills.js:3:4652
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at Object.onInvokeTask (http://localhost:8100/build/main.js:38692:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10220)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
at HTMLDocument.invoke (http://localhost:8100/build/polyfills.js:3:11437)
其他详情
Ionic Framework: 2.2.0
Ionic Native: 2.8.1
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 6.9.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like …