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

如何在Angular2中获取当前组件名称

在Angular 2中获取当前组件名称可以使用Angular提供的Component装饰器中的name属性。该属性可以用来获取当前组件的名称。

以下是获取当前组件名称的步骤:

  1. 首先,在你的组件类上方使用@Component装饰器来定义组件,并设置name属性为组件名称。例如:
代码语言:typescript
复制
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  name: 'MyComponent'
})
export class MyComponent implements OnInit {
  // 组件逻辑
}
  1. 在需要获取当前组件名称的地方,使用constructor方法注入ComponentFactoryResolver服务。例如:
代码语言:typescript
复制
import { Component, ComponentFactoryResolver } from '@angular/core';

export class AnotherComponent implements OnInit {
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
    // 获取当前组件名称
    const componentName = this.componentFactoryResolver.resolveComponentFactory(MyComponent).componentType.name;
    console.log(componentName); // 输出 "MyComponent"
  }
}

通过以上步骤,你可以在Angular 2中获取当前组件的名称。请注意,这种方法只能获取到组件类的名称,而不是组件在模板中的选择器名称。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云函数(SCF):无服务器计算服务,可以让你在云端运行代码而无需管理服务器。了解更多信息,请访问:腾讯云函数
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在代码获取Java应用当前的版本号?

最近需要在项目中获取项目的版本号,最笨的方法莫过于硬编码一个版本号,当然我也是这么干的。不过闲下来的时候突发奇想Spring Boot项目中pom.xml定义的版本号能不能通过API获得呢?...从配置文件读取 Maven在构建项目时可以通过资源插件将构建属性即pom.xml的属性注入到指定的资源文件,具体操作为: ... 恰好spring-boot-starter-parent已经设置了这种方式。...Spring Boot提供 Spring Boot其实已经内置了获取项目构建信息的自动配置ProjectInfoAutoConfiguration,它包含一个条件BeanBuildProperties:...spring-boot-version", "time" : { "epochSecond" : 1620664643, "nano" : 591000000 } } 总结 今天介绍了几种从通过API获取项目构建版本信息的方法

3.2K20

何在代码获取Java应用当前的版本号?

最近需要在项目中获取项目的版本号,最笨的方法莫过于硬编码一个版本号,当然我也是这么干的。不过闲下来的时候突发奇想Spring Boot项目中pom.xml定义的版本号能不能通过API获得呢?...从配置文件读取 Maven在构建项目时可以通过资源插件将构建属性即pom.xml的属性注入到指定的资源文件,具体操作为: ... 恰好spring-boot-starter-parent已经设置了这种方式。...Spring Boot提供 Spring Boot其实已经内置了获取项目构建信息的自动配置ProjectInfoAutoConfiguration,它包含一个条件BeanBuildProperties:...spring-boot-version", "time" : { "epochSecond" : 1620664643, "nano" : 591000000 } } 总结 今天介绍了几种从通过API获取项目构建版本信息的方法

5.9K20
  • 何在回调函数获取 WordPress 接口的当前优先级

    下面开始教程: 如何获取 Hook 优先级 我们在 WordPress 进行开发的时候,肯定会使用到 WordPress 的 Hook,通过 add_filter 或者 add_action 把某个回调函数传递给某个...在回调函数,我们可以通过 current_filter 函数可以获取当前回调函数是在执行那个 Hook ,但是如果要获取当前回调函数优先级,WordPress 就没有相关的函数了,所以我自己写了一个...$hook->current_priority() : null; } 获取 Hook 优先级有什么用 我们可能要移除接口的某个回调函数,然后最后又要加回来,怎么处理呢?...如果和我一样为了偷懒,这前后的移除和添加的回调函数是同一个,那就要在回调函数判断当前的优先级了: function wpjam_filter_content_save_pre($content){...该功能已经整合到 WPJAM Basic 插件,并已免费提供下载,简单勾选或者设置下即可开启!

    52830

    【Unity3D】Unity 脚本 ③ ( C# 脚本的执行入口函数 | 获取当前游戏物体及物体名称 | 获取游戏物体的 Transform 组件数据 | UnityEngine 命名空间简介 )

    文章目录 一、 C# 脚本的执行入口函数 二、 获取当前游戏物体及物体名称 三、 获取游戏物体的 Transform 组件数据 四、UnityEngine 命名空间简介 一、 C# 脚本的执行入口函数...---- 在 C# 脚本控制 游戏物体 GameObject 运动 , 要先获取该物体 , 然后 修改其 Transform 组件的属性 ; 在 游戏开始运行后 , 会自动执行 游戏物体 GameObject...启动加载时调用"); } // Update is called once per frame void Update() { } } 二、 获取当前游戏物体及物体名称...---- 在 C# 脚本 , 游戏物体类型是 GameObject , 可以通过调用 this.gameObject 获取当前 C# 脚本附着的物体 , 代码如下 : // 获取当前组件附着的...类的 name 属性 , 即可获取当前物体的名称 ; // 获取当前组件附着的 游戏物体 GameObject 名称 string name = gameObject.name

    1.3K10

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

    它是如何在Angular 2工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...在Angular2组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...loadChildren会从根文件夹获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。 在子模块中导入模块特定路由。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

    17.3K80

    实战 | Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...综上,说setState是异步的需要加一个前提条件,在React调用的方法执行,这时我们需要通过回调获取到最新的state 相信这个道理大家不难理解,因为事件和生命周期方法都是React调用的,它想怎么玩就怎么玩...我们再来深入一下setState的实现,看看是不是这么回事,下面是setState会调用到的方法: 看变量名称我们也都能猜到大致功能,通过batchingStrategy.isBatchingUpdates...我们在控制台打印下scope,看下$$watchers的内容 因为只有val一个表达式所以$$watchers长度只有1 eq 是否进行数据的深度比较 exp 检测出错时log所用 fn 更新DOM get 获取当前数据...,例如: 设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。

    3.2K20

    Angular2 :从 beta 到 release4.0 版本升级总结

    它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器添加服务提供商。 具体请参考官方文档。...五、表单相关 依赖API更改 // 依赖某些API更改 // ControlGroup => FormGroup import {ControlGroup} from 'angular2/commom...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同的实例。...无法从router里获取RouteParams的API。 原因:angular(v4.1.1),使用ActivatedRoute的API获取路由信息。...使用angular-cli后无法自定义webpack的alias, 导致文件引入路径很长,../../../shared/。

    8.2K00

    揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

    项目名称:基于 Vue.js 的 UI 组件库 项目简介:iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的后台产品。...项目名称:基于 angular 的 UI 组件 项目简介:本项目是基于 angularjs 实现的一套 UI 组件组件需要使用 angularjs1.3 以上版本,其中拍照组件 cameraScanner...项目名称:基于 angular2 的阅图 App 项目简介:本项目是基于 ionic2 + angular2 开发的阅图 App。...;双向数据绑定脏值检查的优化;嵌套路由;构造函数的依赖注入等等。...项目名称:基于 angular2 的插件 项目简介:CodeBe ( 码B ) 是一个是使用 angular2 整合各种插件的项目,包括(layer,bootstrap-table,markdown 编辑器

    2K50

    AngularJS2.0 教程系列(一)

    Angular团队希望在Angular2将复杂性 封装地更好一些,让暴露出来的概念和开发接口更简单。 ?...Rob Eisenberg / Angular 2.0 Team ES6工具链 要让Angular2应用跑起来不是件轻松的事,因为它用了太多还不被当前主流浏览器支持 的技术。...Angular2是面向未来的科技,要求浏览器支持ES6+,我们现在要尝试的话,需要加一些 垫片来抹平当前浏览器与ES6的差异: systemjs - 通用模块加载器,支持AMD、CommonJS、ES6...在这里,我们从angular2模块库引入了三个类型: Component类、View类和bootstrap函数。 2....而在Angular2,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2

    2.4K10

    Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...综上,说setState是异步的需要加一个前提条件,在React调用的方法执行,这时我们需要通过回调获取到最新的state this.setState({val: 1}, () => { console.log...因为只有val一个表达式所以$$watchers长度只有1 eq 是否进行数据的深度比较 exp 检测出错时log所用 fn 更新DOM get 获取当前数据 last 老的数据 那么Angular1是如何感知到数据变化的呢...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。

    3.7K70

    Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...综上,说setState是异步的需要加一个前提条件,在React调用的方法执行,这时我们需要通过回调获取到最新的state this.setState({val: 1}, () => { console.log...我们在控制台打印下scope,看下$$watchers的内容 因为只有val一个表达式所以$$watchers长度只有1 eq 是否进行数据的深度比较 exp 检测出错时log所用 fn 更新DOM get 获取当前数据...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。

    3.3K40

    Angular2:从AngularJS 1.x 中学到的经验

    在《迈向Angular2》第4 章,将会学习如何用Angular 2组件和指令来取代AngularJS1.x 控制器的功能。...在《迈向Angular2》一书第4 章会详细学习组件和脏值检测机制。...在 1.x ,有些对象是根据参数的位置顺序注入的(例如scope、标签、属性,以及指令link 函数的控制器);而其他对象则是根据名称注入的(例如在控制器,指令,服务和过滤器中会根据参数名称进行注入...Angular 2 为属性提供了特殊的语法来解决这个问题,属性值会在当前组件的上下文中执行,同时为传递字面量提供了不同的语法。...在《迈向Angular2》第4 章Angular 2 组件和指令,我们会讨论Angular 2 的模板。

    2.7K10

    前端人员该怎么面试 经典Angular面试题有哪些

    Angular 2组件/指令具有生命周期事件,是由@angular/core管理的。@angular/core会创建组件,渲染它,创建并呈现它的后代。...例如,ngOnint界面的OnInit方法,这个方法必须在组件实现。 #FormatImgID_0# 2、事件发射器如何在Angular 2工作的?...在Angular2组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...简而言之,EventEmitter是在@ angular/core模块定义的类,由组件和指令使用,用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好的性能?...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    4.1K80

    Angular2 @NgModule

    模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Angular2将许多常用功能都分配到一个个的模块:FormModule、HttpModule、RouterModule。...(Angular2没有模块级别的service,所有在NgModule声明的Provider都是注册在根级别的Dependency Injector) ---- 3.imports:导入其他...除非导入的这个module把它内部导入的module写到exports。 ---- 5.bootstrap:通常是app启动的根组件,一般只有一个component。...bootstrap组件会自动被放入到entryComponents。 ---- 6.entryCompoenents: 不会再模板中被引用到的组件。...这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。

    2.1K40

    Angular2学习记录-给后端程序员的经验分享

    号参数风格的.两种参数都保存在ActivatedRoute对象,因此下面代码的route为此对象 — restful风格 配置:{path:'article/:id',component:ArticleComponent...id=1 路由:routerLink="article" [queryParams]="{id: article.id}" js获取:this.route.queryParams的一系列方法,或者this.route.snapshot.queryParams...任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取...agular2的service是providers提供的,该组件如果引用了这个service,那么会先在自己的providers寻找service,找不到则再向上找父组件,直到module.那么意味着每一个...(使用formData对象,调用其append方法添加文件,再使用angular2的http组件post上去)uploadAvatar(file: any): Promise{ let

    3.1K20

    Angular2、Ionic、TypeScript、es6的关系?

    Angular 2并不是一个MVC框架,而是基于组件(component)的框架。在Angular 2,应用是松耦合组件所组成的树。 typescript TypeScript是ES6的超集。...比如在Angular2,用TypeScript明显好于ES6。 -- 某网友 TypeScript的开发者c#之父,所以这个TypeScript的很多语言特性是从c#移过来的。...Ionic为它自己的组件提供了一组指令,因此开发者能够使用Angular创建自定义HTML元素的能力定义Ionic UI组件。...错误更正 由于之前错误的把decorator解释为注解,那么下面就Angular2 的Annotation和Decorator之间做一个简单的对比性学习。...当前,我们也可以实现一个decorator同AtScript Annotations(也就是现在typescript)一样为我们的代码添加元数据(我一直提到“AtScript Annotation”,因为他们所做的事情

    5.2K30

    前端代码常见的 Provider 究竟是什么

    Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...本文就来回答下这几个问题: provider 是什么 provider 创建对象和 factory 有什么区别 provider 的具体应用 provider 是什么 provider 是提供者,从名字上和设计模式创建对象的那些模式很像...但有的时候创建的对象可能有别的来源,比如从别的地方获取的一个值,或者已经创建好的对象。这时候来源就不只有工厂了。...context 的 Provider react 组件树可以在父组件放一些数据到 context ,然后子组件取出来用,也是通过 provider 的方式。...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是在容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。

    1.5K30
    领券