如何访问父navController ionic 2 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Ionic3 导航分析

NavController ionic中的导航也是类似的，至少从指令这一层次来讲基本上类似的。...而对于界面的跳转，Ionic提供了一套自己的API，最常用的就是NavController，这个类中几乎包含了与导航有关的所有方法，通过这个接口可以满足绝大部分需求。...//在构造函数中注入了 NavController constructor(private navCtrl: NavController, private navParams...this.navCtrl.parent 代表当前的父级，this.navCtrl.parent.parent就代表父级的父级。...并且就相当于是的父级。

2.7K1 0

ionic4 -- angular 跳转页面

routeload.png 源码阶段直接使用rxjs监听load跳转分配路由，通过导入父路由或者根路由自带的注解和路由本身来完成类加载。ionic4在这里直接使用的是angular的源码。...新建页面：通过在cmd上输入 ionic g 我们进入一串选项： ? 选择新建项目.png 然后选择page： ?...2、Button直接点击跳转页面：分析源码： ? Button源码.png 发现button实际上是继承 StencliComponets.IonButton ，点击进入： ?...是 navcontroller.push(component) 进行跳转指定页面，那么我们新版本如何跳转呢？...官方文档.png 官网提示用NavController这个类来跳转页面，然而当我翻阅源码： ?

3.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

2 APP 反复练习，应该是很熟悉了： ionic start Ionic2RestAuth --v2 我习惯上会先启动看看，确保项目创建成功： cd Ionic2RestAuth ionic serve...Ionic应用界面 2、创建服务我们需要创建一个服务来访问REST Api，命令如下： ionic g provider AuthService 我们创建对应的方法来访问注册、登陆、登出REST。...总结 Ionic 2 添加页面创建页面创建附加页面使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新的Ionic 2工程 2....Ionic 2 基本导航功能总结 Ionic 2 中使用管道处理数据 1.生成一个新应用 2.创建一个管道 3.使用管道总结 Ionic 2 中使用HTTP与远程服务器交互数据开始之前...Ionic 2程序开始之前 1 创建一个Ionic 2的应用 2 建立Ionic Cloud 3 生成证书和创建一个安全概要 4 使用Ionic Package 命令总结 Ionic

4.8K3 0

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。 1 创建新的Ionic 2工程我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。...可以看到Ionic 2项目的基本结构，这些是由Ionic CLI生成的代码。...哦不是，还记得之前我们如何给homePage分配一个any类型变量吗?现在我们在构造函数中分配一个NavController类型给navCtrl参数。...这就是Ionic 2 的依赖注入工作模式，基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字在它面前,它会自动创建一个成员变量。...4 总结在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能：创建视图监听和处理事件视图之间的导航在视图之间传递数据建立双向数据绑定保存数据显然还有很多我们可以做，使这个应用程序更漂亮

8K5 0

HTML5手机APP开发入门(2)

知识点：如何添加新的模块（page）如何实现页面导航如何实现对数据的绑定创建项目 (--ts:表示使用typescript语法) $ ionic start contact-app...and Angular and will be resolved with the next Ionic2 release (beta.4) because the master is already...通过修改homePage 学习ionic是如何加载view，view-controller的关系 List.html相当于mvc中view，list.ts就是controller 修改list.html...编辑list.ts 添加导航，页面切换到add-item NavController,NavParams 用于页面导航参考 http://ionicframework.com/docs/v2.../api/components/nav/NavController/ ?

1.9K8 0

ionic-navigation 原

/images/{{contact.contactid}}.png" alt=""> 2>{{contact.contactname}}2> {{... import {Component} from '@angular/core'; //import {NavController...} from 'ionic-angular'; import {NavController} from 'ionic-angular'; import {NavigationDetailsPage} from...=[ {"contactid":1,"contactname":"张三","contacttext":"13123451388"}, {"contactid":2,...} from 'ionic-angular'; import {NavController, NavParams} from 'ionic-angular'; @Component({ templateUrl

8821 0

构建具有用户身份认证的 Ionic 应用

序言：本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易，对于 Ionic 入门学习有一定帮助。...OIDC 允许你直接使用 Okta Platform API 进行认证，本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。...本文会演示如何创建一个简单的 Ionic 应用以及如何添加用户身份认证。大多数的应用都需要身份认证，这样才能知道用户是谁。一旦 app 知道你的身份，它就可以保存你的信息及个性化的功能。...with Ionic 2 Josh Morony's Using JSON Web Tokens (JWT) for Custom Authentication in Ionic 2: Part 2...想要了解如何使用 service workers 并把 app 转换成 PWA ，可以阅读如何使用 Ionic 和 Spring Boot 开发移动应用的 PWAs 部分。

28.5K0 0

构建具有用户身份认证的 Ionic 应用

27.7K5 0

Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

安装插件终端运行: ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera ionic.../image-picker 2....导入 app.module.ts ... import {Camera} from "@ionic-native/camera"; import {ImagePicker} from "@ionic-native...background-size: cover; } } edit.ts import {Component} from '@angular/core'; import {IonicPage, NavController...templateUrl: 'edit.html', }) export class EditPage { avatar: string = ""; constructor(public navCtrl: NavController

1.7K1 0

Ionic3 拍照上传

为了方便查看测试结果，需要了解Ionic应用调试的基本方法，有关于Ionic项目Android 调试的详细教程，请参考以下文章：Ionic3 Android调试源码地址 ?... camera.ts，逻辑代码 import {Component} from '@angular/core'; import {IonicPage, NavController...'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYXBpLXJlc291cmNlIl0sInVzZXJfbmFtZSI6ImFkbWluIiwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNTA5MTk2OTcyLCJhdXRob3JpdGllcyI6WyJST0xFX1VTRVIiXSwianRpIjoiOWFmYmIyYWItMzdiYi00MTIyLTg2NDAtY2FmMDc1OTRmOGZkIiwiY2xpZW50X2lkIjoiY2xpZW50MiJ9...bJOpK0UjCI1ym32uerR_jKp4pv8aLaOxnTeK_DBjYZU'; fileTransfer: FileTransferObject = this.transfer.create(); constructor(public navCtrl: NavController...测试文件上传功能，因为在测试文件上传的时候，需要访问设备的原生功能，比如读取文件，因此需要在真机上调试。可是在真机上调试会又一个问题：无法查看日志。这对调试而言是非常不方便的。

2.3K3 0

Ionic 2 添加页面创建页面创建附加页面

现在我们已经基本知道了Ionic2 app的布局，接下来我们来走一遍在我们的app里创建和导航页面的过程。.../pages/hello-ionic/hello-ionic'; ......例如，在hello-ionic/里面有hello-ionic.ts, hello-ionic.html 和 hello-ionic.scss三个文件。...我们再来看看src/pages/list/list.ts里面的内容，你会发现定义了一个新的页面： import {Component} from "@angular/core"; import {NavController...string[]; items: Array; constructor(private navCtrl: NavController

3.3K4 0

Ionic3学习笔记（十）实现夜间模式功能

/src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件，分别用于日间模式、夜间模式的设置。...2. 导入 variables.scss @import "theme.light"; @import "theme.dark"; 3.... setting.ts import {Component} from '@angular/core'; import {IonicPage, NavController...templateUrl: 'setting.html', }) export class SettingPage { theme: boolean; constructor(public navCtrl: NavController...'; import {StatusBar} from '@ionic-native/status-bar'; import {SplashScreen} from '@ionic-native/splash-screen

1.1K3 0

ionic2实现扫描二维码功能

安装插件 // 安装平台插件 ionic cordova plugin add cordova-plugin-qrscanner // 安装ionic2插件 npm install --save @ionic-native.../qr-scanner ---- 2.使用插件 1.创建扫描二维码的页面 ionic generate page qrdcan 2.页面跳转到扫码页面跳转方法 // 跳转扫码页面 goQrdcan...} } } // qrdcan.ts import { Component, OnInit } from '@angular/core'; import { IonicPage, NavController..., NavParams, ViewController } from 'ionic-angular'; import { QRScanner, QRScannerStatus } from '@ionic-native...light: boolean = false; // 控制摄像头前后 frontCamera: boolean = false; constructor(public navCtrl: NavController

1.6K2 0

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

，发现没毛病还能用，并且还多发现了2个接口，现整理如下：正在热映电影列表： http://m.maoyan.com/movie/list.json?...showId=70157&showDate=2017-12-09 Request： showId 放映id showDate 放映时间 2.... movie.ts import {Component} from '@angular/core'; import {IonicPage, NavController...page-movie', templateUrl: 'movie.html', }) export class MoviePage { constructor(public navCtrl: NavController...首先卸载 Ionic WebView 插件 ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save ionic

3.5K1 0

Ionic3学习笔记（十一）实现省市区三级联动

安装 ion-multi-picker 终端运行: npm install ion-multi-picker@2.1.0 --save 2....> edit.ts import {Component} from '@angular/core'; import {IonicPage, NavController..., NavParams} from 'ionic-angular'; import {CityDataProvider} from "../.....templateUrl: 'edit.html', }) export class EditPage { cityColumns: any[]; constructor(public navCtrl: NavController...Angular component and it has 'multiPickerColumns' input, then verify that it is part of this module. 2.

2.2K1 0

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

0 开始之前通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。...要做到这一点，您需要运行以下命令： ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。...接下来我们看到从ionic-native导入 StatusBar，因为我们通过Ionic2使用Cordova来访问本地功能，就像控制 status bar。...通常，我们导入NavController 使用与 MenuController 和Platform 同样的方式然后调用它的 setRoot，但是你不能从根组件调用它，作为替换我们获取引用通过Angular2...页面根组件是一个特例，我们通过 ListPage组件来看看如何添加一个普通的视图到一个Ionic2应用程序。

6K5 0

Ionic3 开发流程

简单介绍自己使用Ionic3开发的过程，涉及到的知识点如下： Angular Ionic Cordova ES6 TypeScript Scss 环境搭建引用插件调试 Android...Angular路由的影子，API就看Ionic的API即可。...NavController、NavParams、依赖注入和你想象中的依赖注入一样。 Ionic ionic3基于Angular4。...Cordova Cordova提供JS访问原生设备的一种手段。Ionic Nativa 对cordova插件做了一层轻度封装，不过提供的文档资料不够详细，所以主要文档还是在 cordova官网上。...cordova 配置SDK 引用插件安装Ionic Nativa 插件直接在Ionic官网看，上面会给安装的命令，拿过来用就好了 ionic cordova plugin add cordova-plugin-camera

2.8K3 0

Ionic 开发之 Ionic Storage 详解

Ionic Storage 是一款基于 localForage 用于 Ionic 应用程序的简单 “键-值” 存储模块，支持 SQLite 开箱即用。...在实际开发中，如果你想执行任意 SQL 查询，你可以直接使用 Ionic Native SQLite 插件。接下来，我们先来介绍一下 Ionic Storage 的安转与使用。...class AppModule {} 之后，你就可以在页面或组件中注入 Storage 服务： import { Component } from '@angular/core'; import { NavController...', templateUrl: 'home.html' }) export class HomePage { constructor( public navCtrl: NavController...this.storage.remove('name').then(() => { console.log('Name item has been removed'); }); 下面我们继续来介绍如何配置

4.6K1 0

ionic2-list 原

/images/{{contact.contactid}}.png" alt=""> 2>{{contact.contactname}}2> <...event,contact)" 也可以把event去掉，ts里面对应的event也去掉 //ts 文件 import {Component} from '@angular/core'; import {NavController...} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/about/about.html' }) export class AboutPage...{ //contacts = []; constructor(private navCtrl: NavController) { this.contacts =[...{"contactid":1,"contactname":"张三","contacttext":"13123451388"}, {"contactid":2,"contactname

5641 0

【Appetite】ionic3实录（七）次页实现及分析解决问题【上】

/assets/imgs/foods/2.jpg" }] } 二、创建数据服务执行命令创建数据服务aboutProvider： ionic g provider about 打开生成的文件并添加如下两个方法...about.ts为： import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core'; import { NavController..., Slides } from 'ionic-angular'; import { AboutProvider } from '../.....dessertSlides: [], dessertList: [], selectedSegment: 'one' }; constructor(public navCtrl: NavController...= 'four'">segment四无论text-center还是padding-left等，用的都是ionic的指令，同样有没有留意到细节：为什么用[hidden

9305 0

点击加载更多

Ionic3 导航分析

ionic4 -- angular 跳转页面

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

HTML5手机APP开发入门(2)

ionic-navigation 原

构建具有用户身份认证的 Ionic 应用

构建具有用户身份认证的 Ionic 应用

Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

Ionic3 拍照上传

Ionic 2 添加页面创建页面创建附加页面

Ionic3学习笔记（十）实现夜间模式功能

ionic2实现扫描二维码功能

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

Ionic3学习笔记（十一）实现省市区三级联动

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

Ionic3 开发流程

Ionic 开发之 Ionic Storage 详解

ionic2-list 原

【Appetite】ionic3实录（七）次页实现及分析解决问题【上】

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐