首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法在Ionic/Angular from对话框中访问"this“的父引用

在Ionic/Angular中,无法在对话框中直接访问"this"的父引用是因为对话框是在一个独立的上下文环境中运行的,无法直接访问父组件的属性或方法。为了解决这个问题,可以采用以下几种方法:

  1. 使用箭头函数:在对话框中使用箭头函数来绑定父组件的上下文,这样就可以访问父组件的属性和方法。例如:
代码语言:typescript
复制
// 在父组件中
openDialog() {
  const dialogRef = this.dialog.open(DialogComponent, {
    data: { parentRef: this }
  });
}

// 在对话框组件中
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
  const parentRef = data.parentRef;
  // 可以通过parentRef访问父组件的属性和方法
}
  1. 使用闭包:在父组件中创建一个闭包函数,将需要访问的属性或方法作为参数传递给对话框组件。例如:
代码语言:typescript
复制
// 在父组件中
openDialog() {
  const dialogRef = this.dialog.open(DialogComponent, {
    data: { parentFn: this.myFunction.bind(this) }
  });
}

// 在对话框组件中
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
  const parentFn = data.parentFn;
  // 可以通过parentFn调用父组件的方法
}
  1. 使用服务:创建一个共享的服务,在父组件中将需要访问的属性或方法存储在该服务中,在对话框组件中通过依赖注入的方式获取该服务并访问属性或方法。例如:
代码语言:typescript
复制
// 创建一个共享的服务
@Injectable()
export class SharedService {
  public parentRef: any;
}

// 在父组件中
constructor(private sharedService: SharedService) {
  this.sharedService.parentRef = this;
}

openDialog() {
  const dialogRef = this.dialog.open(DialogComponent);
}

// 在对话框组件中
constructor(private sharedService: SharedService) {
  const parentRef = this.sharedService.parentRef;
  // 可以通过parentRef访问父组件的属性和方法
}

以上是几种解决无法在Ionic/Angular对话框中访问"this"的父引用的方法。根据具体情况选择适合的方法来实现对父组件的访问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

Apache Cordova 将 HTML 代码嵌入到一个设备上原生 WebView , 通过外部功能接口来访问原生资源。...如果你需要开发原生功能,使用 web 技术是无法实现,但是有些原生插件可以实现。 Ionic Native 是这些插件精选集。 我第一次使用 Ionic 2013 年底。...你可以使用 Chrome 设备模式查看应用程序 iPhone 6 效果。 ? 使用 Ionic serve 命令特点是它会在浏览器显示编译错误,而不是(有时会隐藏)开发控制台。...import { Component, ViewChild } from '@angular/core'; import { NavController } from 'ionic-angular';...它们用于访问被保护资源,通常是发送请求时将它们添加到 Authentication 请求头中。

23.8K00

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

Apache Cordova 将 HTML 代码嵌入到一个设备上原生 WebView , 通过外部功能接口来访问原生资源。...如果你需要开发原生功能,使用 web 技术是无法实现,但是有些原生插件可以实现。 Ionic Native 是这些插件精选集。 我第一次使用 Ionic 2013 年底。...你可以使用 Chrome 设备模式查看应用程序 iPhone 6 效果。 ? 使用 Ionic serve 命令特点是它会在浏览器显示编译错误,而不是(有时会隐藏)开发控制台。...import { Component, ViewChild } from '@angular/core'; import { NavController } from 'ionic-angular';...它们用于访问被保护资源,通常是发送请求时将它们添加到 Authentication 请求头中。

23.2K50

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

我们可以构造函数上面声明变量,像上面这样使其成员变量 member variables,这意味着他们可以通过引用this.myVal整个类中被被访问,同时,它也将在您模板可用。...这就是Ionic 2 依赖注入工作模式,基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字它面前,它会自动创建一个成员变量。...} from 'ionic-angular'; import { MyApp } from '....构造函数,我们建立一个 Storage 服务引用。 数组save函数简单地将所有的项放入数组并保存到存储,每当项目变化我们将调用这个函数。...} from 'ionic-angular'; import { MyApp } from '.

6.1K50

Ionic3 自定义指令

Angular 中有三种类型指令 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观和行为指令。...组件概念比较大,本文讲解是属性指令和结构指令创建和使用,Angular官方文档 创建属性指令 创建一个指令可以直接使用ionic cli 工具 ionic g directive sxylight...背景色颜色可由组件传入。...如果时使用 Ionic CLI工具创建指令,directives.module.ts 已经自动配置好了,可以不用理会,需要就是别的模块 引入 DirectivesModule(directives.module.ts...比如,我需要在自己 table模块引用这个指令,那么只需要子啊 table.module.ts引入这个模块即可,不需要在 app.module.ts引入 ?

1.3K30

Ionic3 拍照上传

测试,以实际情况为准,可以没有这个验证,一切看你后台。...,具体需要什么参数,要不要传参数,都是以你后台接口为依据,测试过程如果不太如意,看看是不是后台接口问题。...之后会写一篇文章专门介绍一个简单后台接口。 测试文件上传功能,因为测试文件上传时候,需要访问设备原生功能,比如读取文件,因此需要在真机上调试。可是真机上调试会又一个问题:无法查看日志。...在上面的代码拍照完成回调函数,直接调用了 this.upload() 方法,该方法负责上传文件,所以拍照完成后,就会直接将图片上传到服务器,同时图片展示界面。...本例,图片是以 base64 形式上传,也可以用File URL形式上传文件。

1K30

【Appetite】ionic3实录(五)基本服务实现

前面章节我们都是用命令行来操作,如ionic g page person,现在开始会涉及到很多命令操作,可能有些人会记不住命令,或者记不清关键字,可以像我这样,IDE上装上插件,我这用是VS Code...image.png TypeScript,public为默认访问级别,即外部可以访问,所以如果想控制权限,请手动添加private关键字。...常规应用,一般会有通用服务和具体业务服务,而常用通用服务有如下几个: 一、全局设置服务 ionic g provider config import { Injectable } from '@...四、缓存服务 ionic g provider cache import { Injectable } from '@angular/core'; import { Http } from '@angular...五、工具服务 ionic g provider util import 'rxjs/add/operator/map'; import { DomSanitizer } from '@angular

3.1K40

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

Ionic应用界面 2、创建服务 我们需要创建一个服务来访问REST Api,命令如下: ionic g provider AuthService 我们创建对应方法来访问注册、登陆、登出REST。...插件 Ionic 和 Cordova 误解 使用Ionic Native 使用没有包含在Ionic Native插件 Ionic 2 添加图表 1....模版中使用 总结 Ionic 2 创建一个闪视卡片组件 1. 创建一个新应用作为例子 2. 什么是组件? 3. 创建组件模版 4. 创建组件类 5. 创建 CSS 动画 6....使用照片倾斜浏览组件 总结 Ionic 2 实现一个简单进度条 理解 自定义组件 Input 和 output 1.创建一个新应用 2.创建组件 修改src/components/...progress-bar/progress-bar.ts如下: 3.使用这个组件 总结 使用VS CodeChrome调试Ionic 2 优化你Ionic2应用 打开Angular产品模式

3.7K30

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

git checkout TheInitialProject 本App,咱们采用了 Ionic 作为基础工程框架,Ionic 是基于 AngularJS 来构建,所以第一步就是先把页面路由和URL... js 目录下添加 services.js 和 controllers.js 并在 index.html添加引用。..., [ionic, ddApp.services, ddApp.controllers]) d) index.html添加 Javascript 文件引用 <script src="js/app.js...代码很简单,设定App<em>中</em>Url对应<em>的</em>状态,和对应要<em>访问</em><em>的</em>页面,同时也需<em>在</em> www 目录下创建 templates 文件夹和对应<em>的</em>页面文件。...到这一步您可以执行以下 <em>ionic</em> serve <em>ionic</em> serve <em>在</em>浏览器里<em>访问</em> http://localhost:8100/#/login 或者 http://localhost:8100/#/

1.7K70

ionic3应该善用组件和指令

ionic3开发框架是angular4,所以了解一下angular4一些基础知识,能让你更好开发应用。...angular4提供了很多功能强大内置指令,但在现实情况,这些内置指令可能还不能完全满足实际要求,这时我们就需要编写自定义指令来实现特定要求。...其实ionic3(angualr4)和ionic2(angular2)差不多,但和ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。...TemplateRef用来访问组件模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM。 组件 这个不必说了,我们用得最多便是组件。...为实现该指令,要借用TemplateRef和ViewContainerRef,TemplateRef用来访问组件模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM

3.5K40

Ionic4与Ionic3部分比较

image.png 二、路由差异 也许Ionic 4最显着变化,以及需要对现有应用程序进行最大改变变化,是转向Angular风格路由。...观察目录结构,很容易发现这是一个angular项目,是因为它有一个routing模块: import { NgModule } from '@angular/core'; import { Routes...Angular在这方面有点特殊,由于Ionic / Angular过去已经紧密集成,因此Ionic特定Push/Pop导航已经存在并且正在被其应用程序的人们使用。...action-sheet-controller loading-controller …… 前面2个一般是有自定义UIionic3是可通过自定义组件注入ViewController来关闭窗口,...ionic4已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭。

6.9K10

Ionic3 导航分析

刚接触ionic时候,我觉得导航不太好理解,主要是ionic导航方式和我们之前接触路由导航方式不太一样。...因为就自我感觉而言uiRouter 和 ionic导航使用方式上有点像,特别是从它们提供指令这一层来考虑。...如果你没有了解过Angular4路由,其实也可以简单看看uiRouter使用,不需要了解多详细,仅仅理解它那个指令使用方式就可以了。...有关于uiRouter更详细介绍,可以看看这篇文章 Angular导航 点击对应链接,触发 $state.go('x'x'x') 方法,uiRouter根据state找到对应视图并加载ui-view...,所以可以是一个字符串(有关于懒加载具体可以看Angularionic文档) //root 表示是默认加载界面,也就是应用一启动就加载哪个界面 app.component.ts 。

2K10

ionic3升级适配angular5

昨天angular5和ionic3同时发布更新了,为了用上angular5新特性,还是有必要踩下坑,当然踩坑白老鼠建议选用一个最近不用维护项目。...先看下ionic3更新版本,同一天发布了三个版本,后两个版本都是修复一两个小bug。 ? ionic3最新版本 ?...angular5最新beta版 ionic3官网建议是更新依赖到angular5.0.0版本,而根据上述说明,优先选择做了做了bug修复angular5.0.1版。...本项目中,因为没有用到那几个内置管道,也没有用到路由,所以主要是调整Http模块: 4.xHttpClient模块被封装在@angular/common,新HttpClient被封装在@angular...首先app.module.ts,把import { HttpModule } from '@angular/http';替换为下述内容: import { HttpClientModule } from

2.5K40

ionic3使用带图标带事件toast

ionic3自带ToastController创建toast比较简单,不支持图标,且点击toast时是没有事件回调…… 这个时候,如果想扩展这些功能,一是修改源码,二是自己实现,然而这两种方法都比较麻烦...,比较好解决方案是利用现有的开源代码,搜索ionic相关组件寥寥无几,这个时候转换下思路,搜索angular相关组件会发现有几个,经过比较后觉得ngx-toastr较为适合。...@angular/animations --save 添加样式 Github文档是通过修改angular-cli.json文件来导入样式,而对于ionic来说,该类似文件封装在源码里面,不应该修改,...它其实对应着第一步安装@angular/animations,动画导入早期也是import * from ‘@angular/animations‘,只是后期把animations抽离后就变成了import...; } } 防止污染ionic自带toast样式 ngx-toastr样式刚好和ionic都用到了.toast-containerclass,所以会影响,此时,把toastr.min.css

2.9K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券