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

使用"this“时发生冲突。在Angular 6中如何访问方法外部的变量?

在Angular 6中,当使用"this"关键字时发生冲突的情况通常是在回调函数或异步操作中。这是因为在回调函数中,"this"的上下文已经改变,不再指向组件本身。

为了访问方法外部的变量,可以使用箭头函数(Arrow Function)来解决这个问题。箭头函数会继承父级作用域的上下文,因此可以访问到方法外部的变量。

下面是一个示例:

代码语言:txt
复制
export class MyComponent implements OnInit {
  externalVariable: string;

  ngOnInit() {
    // 在这里访问方法外部的变量
    setTimeout(() => {
      console.log(this.externalVariable);
    }, 1000);
  }
}

在上面的示例中,我们使用箭头函数来定义setTimeout的回调函数,这样就可以在方法外部访问到externalVariable变量。

对于Angular 6中其他可能发生冲突的情况,可以使用bind方法来显式绑定this关键字的上下文,或者使用类属性来保存this的引用。但是这些方法相对较为繁琐,不如箭头函数简洁方便。

关于Angular 6的更多信息和相关概念,可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

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

相关·内容

在Java内部类中使用外部类的成员方法以及成员变量

作为成员内部类,可以随意引用外部类中的成员变量与成员方法。那么在成员内部类中定义的成员变量,外部类是否也可以随意访问呢?答案是否定的。...只是不能够进行直接的引用,而是要使用内部类对象引用的方法才能够调用内部类的成员变量。这一点程序开发人员需要切记。成员内部类与外部类相互访问彼此的成员方法限制是不同的。...由于在内部类中可以随意访问外部类中成员方法与成员变量。但是此时成员内部类与外部类的变量名相同,那么如果要在内部类使用这个变量i,编译器怎么知道现在需要调用外部类的变量i,还是内部类的变量i呢? ...而通过使用student.this.i的形式调用变量时表示此时引用的是外部类的成员变量。也就是说,如果内部类中引用外部类中同名的成员,需要通过外部类迷名字。this.外部类成员名字的方式加以引用。...而且,在引用成员内部类自己的定义的成员时也需要使用this关键字,以加以区别。显然这非常的麻烦。

2.9K10

在PHP中如何使用全局变量的方法详解

有很多方法能够使这些数据成为全局数据,其中最常用的就是使用“global”关键字申明,稍后在文章中我们会具体的讲解到。...它们通常都来自数据或者其他外部数据,使用这些变量通常是不会产生问题的,因为他们基本上是不可写的。 但是你可以使用你自己的全局变量。...在开发的过程中,你可能会知道知道每一个全局变量,但大概一年之后,你可能会忘记其中至少一般的全局变量,这个时候你会为自己使用那么多全局变量而懊悔不已。 那么如果我们不使用全局变量,我们该使用什么呢?...虽然这些变量都非常标准,而且在你使用中也不会出什么问题,但是在某些情况下,你可能同样需要使用注册器来封装它们。 一个简单的解决方法就是写一个类来提供获取这些变量的接口。...> 正如你看到的,现在我们不再依靠任何全局变量了,而且我们完全让这些函数远离了全局变量。 结论 在本文中,我们演示了如何从根本上移除代码中的全局变量,而相应的用合适的函数和变量来替代。

7.3K100
  • Angularjs基础(三)

    如何使用Scope       当你在AngularJS创建控制器时,你可以将$scope对象当做一个参数传递:           实例: 控制器中的属性对应了视图上的属性:             ...实例:当我们使用ng-repeat 指令时,没个重复项都访问了当前的重复对象。         ...,这里对应用的是一个字符串,并使用变量x 表示。...在AngularJS 使用$scope是一个应用像(属于应用变量和函数)           控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。           ...    在大型的应用程序中,通常是把控制器存储在外部文件中。

    3.1K50

    【ASP.NET Core 基础知识】--前端开发--集成前端框架

    生命周期方法: React组件具有丰富的生命周期方法,允许开发者在组件的不同阶段执行特定的操作。这使得开发者能够更好地控制组件的行为,进行初始化、更新和销毁等操作。...下面是如何在 ASP.NET Core 中使用 SignalR,并在前端框架中进行调用的简要示例: 创建 ASP.NET Core 项目: 在 Visual Studio 中创建一个 ASP.NET...四、前端路由与ASP.NET CORE路由的整合 4.1 Angular路由 在将 Angular 路由与 ASP.NET Core 路由整合时,通常需要考虑两者之间的路由配置以及如何处理前端路由和后端路由的冲突...的主页面 await next(); } }); 处理路由冲突 当使用 Angular 路由时,需要确保前端路由和后端路由不会发生冲突。...使用异步编程模型来提高并发处理能力,如使用异步方法、任务队列等。 缓存 使用缓存来存储频繁访问的数据,减少对数据库的访问。 使用分布式缓存来提高缓存的可靠性和扩展性。

    24400

    【AngularJS】—— 13 服务Service

    本篇文章会介绍一下的内容:   1 $http这种Angular提供的服务的使用   2 如何自定义服务,并总结服务需要注意的几个小点。   ...然后看一下外部如何使用,先看看视图部分: username...当username属性变化时,会触发请求方法。   控制器多注入了一个$timeout变量,该变量用于控制输入的时间。...在函数内部,调用了我们自己的服务提供的userList方法。当请求成功时,绑定返回值到users中。users会动态的刷新内容。   查看程序的演示结果: ?   ...,有下面几点需要注意:   1 它的使用场景:由于可以在服务中抽取公共调用的方法,因此可以把多个控制器中相同的功能抽取出来,形成一个服务。

    1.4K50

    AngularDart 4.0 高级-生命周期钩子 顶

    生命周期序列 通过调用其构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...AfterContent 演示如何将外部内容投影到组件中,以及如何区分组件的视图中的投影内容和子组件。 演示ngAfterContentInit和ngAfterContentChecked挂钩。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。...ngOnChanges方法是您第一次访问这些属性的机会。 在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。 它只调用一次ngOnInit。...DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。 使用此方法检测Angular忽略的更改。

    6.2K10

    AngularDart4.0 高级-属性(Attribute)指令 顶

    当Angular在模板中遇到myHighlight时,就会识别该指令。...当然,你可以用标准的JavaScript访问DOM,并手动添加事件监听器。 这种方法至少有三个问题: 你必须正确的写下监听器。 当指令被销毁时,代码必须分离监听器以避免内存泄漏。...处理程序委托给一个帮助器方法,该方法设置DOM元素_el的颜色,在构造函数中声明并初始化它。...'red'); 当您已经绑定到myHighlight属性名称时,如何绑定到第二个属性? 与组件一样,您可以根据需要添加尽可能多的指令属性绑定,方法是在模板中将它们串起来。 ...当您编写功能指令时,请遵循以下规则: 使函数返回类型void。 在@Directive()注释中,只使用selector参数,必要时使用providers。

    3.2K10

    2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库

    22.原型和原型链 23.事件委托 24.解释一下变量的提升 25.如何理解高阶函数 26.如何区分声明函数和表达式函数 27.解释原型继承是如何工作的 BOM & DOM 1.BOM事件?...2.提交时发生冲突,你能解释冲突是如何产生的吗?你是如何解决的? 3.如果本次提交误操作,如何撤销? 4.如果我想修改提交的历史信息,应该用什么命令? 5.你使用过git stash命令吗?...13.我们在本地工程常会修改一些配置文件,这些文件不需要被提交,而我们又不想每次执行git status时都让这些文件显示出来,我们该如何操作? 14.如何把本地仓库的内容推向一个空的远程仓库?...37.params 和 query 的区别 38.vue 初始化页面闪动问题 39.vue 更新数组时触发视图更新的方法 40.vue 常用的 UI 组件库 41.Vue的生命周期?...5.jQuery中的方法链是什么?使用方法链有什么好处? 6.如何将一个HTML元素添加到DOM树中的? 7.说出jQuery中常见的几种函数以及他们的含义是什么? 8.jQuery 能做什么?

    1.8K20

    TypeScript 的高级特性

    ,而在使用 TypeScript 开发时,大部分代码都是写在类里面的使用class关键字 + 类名即可完成 类的声明,可以在类里面指定属性和方法,声明一个类之后,我们就可以通过new关键字进行实例化在声明一个类的时候...,我们可以给类的属性和方法指定一个访问控制符,其作用是控制类的属性和方法能否在类外部被访问到,访问控制符一共有三个,public为共有的,即在类的内部和外部都能被访问到,不声明访问控制符,默认即为public...;private为私有的,即在类的外部无法访问;protected为受保护的,在类的内部和子类当中可以访问到类的构造函数 其实就是类里的一个方法,该方法只会在类的实例化时被调用,并且只会调用这一次了解了构造函数之后...)是用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定,JavaScript 里是没有接口这一概念的,而 TypeScript 中提供了两个关键字来支撑接口这个特性使用...开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用,哪些资源只在模块内使用注解注解(annotion)为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关

    1.1K40

    Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言:   最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。...生命周期钩子:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法:...注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!...该方法接受当前和上一属性值的 SimpleChanges 对象 在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...[请求数据时使用] ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。

    2.8K20

    Angular&TypeScript

    (达内教育学习笔记)仅供学习交流 Angular-TypeScript Angular&TypeScriptTS简介TS的扩展特性:访问修饰符的特殊用法面向对象编程-class和interface...装饰器 Angular&TypeScript TS简介 TS的扩展特性: 访问修饰符的特殊用法 面向对象编程-class和interface 装饰器 TS简介 TypeScript是JavaScript...Angular从V2.x开始使用TS编写;Vue.js从V3开始使用TS编写; 中文网:https://www.tslang.cn/ 浏览器不支持TS,其使用步骤: 1.下载TS的编译器 npm i...extends Emp{ lang:string = '' override ename = 'tom' } public:公共的,公共成员在本类以及外部使用 提示:一般的,class...内的属性不应该让外部随便访问,通常设置为private,方法一般允许被访问为public。

    77930

    AngularJS入门心得4——漫谈指令scope

    》在scope上的补充和延伸。    ...指令的内部可以访问外部指令的作用域,并且模板也可以访问外部的作用域对象。为了将作用域传递进去,scope参数的值必须通过{}或true设置成隔离作用域。...即指令直接共享外部控制器的scope,此时directive中的scope就和控制器紧密相关,所以此时,scope.name在指令的link中被重新赋值,这时候控制器和指令中的name都被更新为Jeff...通过这种声明,表明directive有了自己的独立的scope,但是这种scope会在directive实例化的时候将外部控制器中的变量全部复制到自己的scope作用域中。...隔离scope   具体细节已经在《AngularJS入门心得1——directive和controller如何通信》介绍,这里不再赘述。

    1.9K60

    AngularDart4.0 指南- 表单 顶

    使用跟踪控件状态的特殊CSS类提供视觉反馈。 向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量在HTML元素之间共享信息。 您可以在Plunker中运行实例(查看源代码)并从那里下载代码。...模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令和技术在Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...Angular可不使用Bootstrap类或任何外部库的样式。 Angular的应用程序可以使用任何CSS库或不使用。...删除#spy模板引用变量和使用它的诊断。 作为类绑定的替代方法,可以使用NgClass指令来设置控件的样式。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。

    17.5K30

    前端相关片段整理——持续更新

    on/emit 其他 使用空的vue实例作为中央事件总线 3.5. angular与react之对比 React 和 Angular 之间的巨大差异是 单向与双向绑定 React 和 Vue 都使用了虚拟...闭包 特点: 函数 能访问另外一个函数作用域中的变量 ES 6之前,Javascript只有函数作用域的概念,没有块级作用域。即外部是访问不到函数作用域中的变量。...总结 可以访问外部函数作用域中变量的函数 被内部函数访问的外部函数的变量可以保存在外部函数作用域内而不被回收---这是核心,后面我们遇到闭包都要想到,我们要重点关注被闭包引用的这个变量 4.3....作用域链 为什么闭包就能访问外部函数的变量呢 Javascript中有一个执行环境(execution context)的概念,它定义了变量或函数有权访问的其它数据,决定了他们各自的行为。...外部无法访问 实现面向对象中的对象 这样不同的对象(类的实例)拥有独立的成员及状态,互不干涉 优点: 可以让一个变量常驻内存 (如果用的多了就成了缺点 避免全局变量的污染 私有化变量 缺点: 因为闭包会携带包含它的函数的作用域

    1.4K10

    angularjs 指令详解

    当设置为字符串时,会以字符串的值为名字,来查找注册在应用中的控制器的构造函数. angular.module('myApp', []) .directive('myDirective', function...3.当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。...当然,你不想使用默认的方式,也就是说,你不想myUrl变量绑定my-url的值,而想要绑定其它属性名的值,那么你可以在@后加上你希望的属性名(格式要求:驼峰式)。...那么我们知道了指令的myUrl变量的值是如何来的,那么我们要如何在template中使用它呢?...本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定,使指令内部作用域可以使用外部作用域的变量:  @ 可以在指令中使用绑定的字符串了。   2.

    2.2K40

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    这通常用在setter中,当类中的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好的方式维护代码。...其中一些是: 避免为你的组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外的地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任的。...这需要等待下载所有必需的组件,然后等待编译器花费时间来编译应用程序。使用AOT编译,就能实现优化。 在构建时检测错误:由于预先编译,可以检测到许多编译时错误,能够为应用程序提供更好的稳定性。...也欢迎大家在文末留言,交流Angular的使用经验哦!

    17.4K80

    编程星球——水·滴20180624期

    最好是在脚本中检查版本在生成相应的命令行。...: 变量不加def,将变量添加到当前脚本的binding,一般看作全局变量。...2018/6/21 #水·滴# C#类字段属性区别: 字段一般用在类的内部使用,属性一般供外部类访问。...按照类的设计原则,字段都是private的,只能在类的内部使用,如果是public的,那么外部类谁都有可能访问,对字段进行破坏性的修改,这是我们不希望看到的,所以字段一定是private的。...对于外部使用者来说只能够使用它,不能控制它,如何控制操作是由类自身决定的(或者说是由程序员决定的,嘿嘿~)。 另外,字段值可以用作ref、out参数,而属性不能。

    1.7K30

    JavaScript中,var、let和const使用

    如今,不推荐使用var,以下是一些你应该使用let和const的原因:var具有函数作用域,这意味着用var声明的变量在整个函数中都是可访问的,即使在函数内的嵌套块(如if语句或循环)中也是如此。...这意味着用let声明的变量只有在它们定义的块内(通常用大括号{}包围)才可访问。这提供了一种清晰和可预测的方式来管理变量作用域,防止意外的副作用,使你的代码更易于维护。当使用循环时,let是首选。...在循环(如for或while)中,你经常需要一个变量来跟踪当前迭代。let确保这个计数器变量只在循环块内可访问,防止与代码中的其他变量发生冲突。...在if、else if或switch语句中,你可能需要临时变量来根据某些条件存储值。let创建的变量仅对该条件块局部,避免与外部变量发生冲突。...(假设age >= 18)虽然let主要关注块级作用域,但它还在函数内部引入了比旧的var关键字更可预测的行为。在函数内部用let声明的变量在该函数外部不可访问,促进了更好的组织并防止了意外的修改。

    12300

    2018年前端面试总结

    在选择标签时请遵循以下原则: 1.尽可能少的使用无语义的标签div和span; 2.在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 3.不要使用纯样式标签...407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。 408 (请求超时) 服务器等候请求时发生超时。 409 (冲突) 服务器在完成请求时发生冲突。...属性查找 getElementById() //通过元素的id查找 2.如何理解闭包 定义和用法: 一个父函数里面包含了一个子函数,子函数调用了父函数内部的变量,如果子函数在外部被调用,就产生了闭包。...26.说说你对作用于链的理解 作用域链中的变量都是向上访问的,变量访问到windows对象后终止,向下访问是不允许的。 简单的说,作用域就是变量函数的可访问范围。...null: 变量被定义赋值了,但是为空的情况,没有任何属性方法和值 在验证null时,一定要使用 === ,因为 ==无法分别null 和 undefined 37.谈谈对json的了解 json是

    72920
    领券