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

无法在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"的父引用的方法。根据具体情况选择适合的方法来实现对父组件的访问。

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

相关·内容

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
  • 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个一般是有自定义UI的,在ionic3中是可通过自定义组件注入ViewController来关闭窗口,...在ionic4中已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭。

    7K10

    ionic3升级适配angular5

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

    2.5K40

    【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

    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-container的class,所以会影响,此时,把toastr.min.css中的

    3K20

    ionic3应该善用组件和指令

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

    3.5K40

    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 Code在Chrome中调试Ionic 2 优化你的Ionic2应用 打开Angular产品模式

    3.7K30

    Ionic3 导航分析

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

    2K10

    构建具有用户身份认证的 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

    Ionic3 拍照上传

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

    1.1K30

    使用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

    构建具有用户身份认证的 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.3K50
    领券