Angular 10升级:为什么抽象(组件)类使用@Directive()而不是@Component()？

在Angular 10中，抽象类使用@Directive()而不是@Component()的主要原因是为了更好地区分它们的用途和功能。虽然抽象类和组件类在某些方面相似，但它们在Angular框架中的角色和目的是不同的。

@Directive()装饰器用于标识一个指令类，指令类是一种用于扩展HTML元素或组件的行为的类。它们通常用于添加特定的行为或功能，而不涉及模板或视图的渲染。指令类可以包含指令逻辑和与DOM元素交互的代码。

抽象类在Angular中用于提供可重用的代码和共享的行为。它们通常不直接与DOM元素交互，也不涉及视图的渲染。抽象类可以被其他组件或指令继承，并通过继承来共享代码和行为。

因此，将抽象类标记为@Directive()而不是@Component()有助于更好地理解和区分它们的用途。使用@Directive()装饰器可以明确表示该类是一个指令类，而不是一个组件类。

在Angular中，@Component()装饰器用于标识组件类，组件类是一种用于定义视图和处理与视图相关的逻辑的类。组件类通常包含模板、样式和与视图交互的代码。

总结一下，抽象类使用@Directive()而不是@Component()是为了更好地区分它们的用途和功能。@Directive()装饰器用于标识指令类，而@Component()装饰器用于标识组件类。这样做有助于提高代码的可读性和可维护性。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/mpns
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent Real-Time Rendering）：https://cloud.tencent.com/product/trr

相关·内容

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

属性指令有两种：基于类：一个全功能的属性指令，使用类实现。功能化：无状态属性指令，使用顶层函数实现。...创建一个基于类的属性指令创建一个基于类的属性指令需要编写一个用@Directive()注解的控制器类，它指定标识属性的选择器。控制器类实现指令所需的行为。...Angular定位模板中具有名为myHighlight的属性的所有元素。 为什么不叫它“highlight”？...没有@Input，Angular拒绝绑定到属性。您之前已将模板HTML绑定到组件属性，并且从未使用@Input。有什么不同？差别是一个信任的问题。 Angular将组件的模板视为属于组件。...左边的myHighlight属性指的是HighlightDirective的别名属性，而不是模板组件的属性。有信任问题。因此，指令属性必须带有@Input注解。

3.2K1 0

Angular2 @Component

@Component是一种特殊的Directive .相当于Angular1 中 Directive 和 Controller 的合体它的配置更简单一些，非常适合组件化的app架构。...使用web组件和使用Angular风格的app架构使得编写app更为简便。...Component的优点：比普通directive要简单很多更加严谨，更加规范化更加适合组件化架构 component更容易升级到angular2 ---- Component只能控制它自己的视图和数据...Component有明确定义的公共api－输入输出：隔离范围并不是全部，因为AngularJS是双向绑定的。...如果你传一个对象到组件中，类似 bindings: {item: '='} ，然后修改对象的属性，修改会反映到它的父组件中。

5262 0

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

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。...它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。具体请参考官方文档。...升级angular(v2.4.0)到(v4.1.1)版本后，左侧导航的状态定位失效原因：升级后，router和component的hook顺序调整（仅根据个人观察，未经验证），导致组件状态未能在路由事件结束...", "paths": { "@shared/*": ["src/app/shared/*"] } ... }, ... } 10.升级angular(v4.1.1...)版本后，组件迁移状态更新失效原因：升级后，component的hook顺序调整，导致组件状态未能在component状态更新后完成更新。

8.1K0 0

angular5面试题_大数据面试题

Module 延迟加载（Lazy-loading）什么是指令（Directive） Promise 和 Observable的区别如果提高Angular的性能 Angular 版本如何升级关于Angular...可以采用如下方式避免对于只用于展示的数据，使用单向绑定，而不是双向绑定； Angular的数据流是自顶而下，从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。...更多优化技巧，参考 angular绑定（脏检查）方面的性能优化技巧关于angular的Module 什么是angular的Module 模块(Module)是一个我们可以对组件(Component...参考https://angular.io/guide/lazy-loading-ngmodules 什么是指令（Directive）指令（Directive）用于添加行为到已有元素（DOM）或者组件（...Angular 版本如何升级 Angular CLI提供了升级命令(ng update)，同时，官网（https://update.angular.io/）也有升级指南。

4.3K2 0

angular面试题及答案_angular面试

组件和指令的区别 component使用注解@Component修饰，directive使用注解@Directive修饰 component是组件化思想，基于组件创建应用，把应用划分成细小的可重复利用的组件...，而directive用来在已经存在的DOM元素上实现一些行为 component是可重复使用的组件，directive是可重复使用的行为 component可创建一个view，即template或templateUrl...，而directive没有。...10. { {}} 与HTML标签一起使用，eg: { {var}} var 是来自于ts（component）中的值。...6）如果应用程序较大时，我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处可以添加自定义的directive. 优秀的社区支持。客户端和服务器的通讯非常便利。

10.9K12 0

Angular DOM 抽象概述

为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...get elementRef(): ElementRef; abstract createEmbeddedView(context: C): EmbeddedViewRef; } (备注：抽象类与普通类的区别是抽象类有包含抽象方法...，不能直接实例化抽象类，只能实例化该抽象类的子类) 作用利用 TemplateRef 实例，我们可以灵活地创建内嵌视图。...在 Angular 中支持两种类型视图： Embedded Views - Template 模板元素 Host Views - Component 组件创建 Embedded View ngAfterViewInit.../packages/common/src/directives/ng_component_outlet.ts @Directive({selector: '[ngComponentOutlet]'})

3.5K3 0

高级 Angular 组件模式 (7)

Angular 中其本身推崇组件化开发，即把一切 UI 概念当做 Component 来看待，但仔细思考的话，这其实是有前提的，即这个 UI 概念一般是由一个或多个 html 元素组成的，比如一个按钮、...但是在前端开发中，小于元素这个颗粒度的概念也是存在的，比如上文提及的 aira 属性便是其中之一，如果也为将这些 UI 概念抽象化为一个组件，就未免杀鸡用牛刀了，因此这里使用 Directive 才是最佳实践...从组件开发者的角度来看的话，Directive 也会作为一种相对 Component 更加轻量的解决方案，因为与其提供封装良好、配置灵活、功能完备（这三点其实很难同时满足）的 Component，不如提供功能简单的...Directive，而将部分其他工作交付组件使用者来完成。...比如文章中所提及的，作为组件开发者，无法预先得知组件使用者会怎样管理开关元素以及它的样式，因此提供一些 hooks 是很有必要的，而 hooks 这个概念，一般情况下，都会是相对简单的，比如生命周期 hook

8052 0

Angular学习（02）--Angular-CLI命令

正文- Angular-CLI 命令 Angular 的项目其实相比老旧的前端项目模式或者是 Vue 的项目来说，都会比较重一点，因为它包括了：模块 @NgModel，组件 @Component，...指令 @Directive 等各种各样的东西，而每一种类型的 ts 文件，都需要有一些元数据的配置项。...ng g directive 这个是创建指令的命令，组件其实是指令的一种，所以，上面介绍的关于组件命令中的各种选项配置，在指令这里也基本都可以使用，这里不列举了，清楚相关默认文件来源后，不懂的，去翻阅下就可以了...以上，是 ng generate 命令的常见用法，它还可以用来创建其他东西，但我常用的就这几种，而且，很多时候，都不是使用默认的行为，因此常常需要配置选项配置一起使用。...另外，为什么非得用 Angular-CLI 命令来创建文件，用 WebStrom 自己创建个 ts 文件不行吗？

2.6K1 0

ionic3应该善用组件和指令

在angular1时代，组件和指令是一回事，即严格来说，没有组件这概念，只有指令，而到了angular2时代，虽说组件仍是一种特殊的指令，但已经有一定目的明显区分开来，分别用Directive和Component...来标识，用cli生成命令就如下所示： ionic g directive 指令名 ionic g component 组件名要说指令和组件的区别，简单说是不带视图和带视图的区别，直观效果是：一个为原有标签动态添加功能...往往很多人会封装组件，但不会去封装指令，而选择用Provider或者Pipe（管道，相当于angular1时的过滤器filter），甚至样式来实现，虽说这也能解决部分问题，但不是最优的，Directive...TemplateRef用来访问组件的模板，而ViewContainerRef可作为视图内容渲染器，将模板内容插入至DOM中。组件这个不必说了，我们用得最多的便是组件。...直接上代码: 组件ts部分： import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({

3.5K4 0

Angular 6.x 指令快速入门

阅读须知本系列教程的开发环境及开发语言： Angular 6.x Angular CLI TypeScript 基础知识 Angular CLI 基本使用安装 Angular CLI (可选) $...指令简介 Angular 的指令分为三种：组件（Component）：用于构建UI组件，继承于 Directive 类属性指令（Attribute Directive）：用于改变组件的外观或行为...结构指令（Structural Directive）：用于动态添加或删除 DOM 元素来改变 DOM 布局 Angular 组件组成图 ?...ngTemplateOutlet 的使用 import { Component } from '@angular/core'; @Component({ selector: 'app-root',...}; } 第七节 - 使用 ngComponentOutlet 指令 ngComponentOutlet 的作用该指令用于使用声明式的语法，动态加载组件。

3.2K4 0

Angular 自定义指令 Tooltip

$ ng generate component tooltip # 创建 tooltip 指令 $ ng generate directive tooltip 执行完上面的命令行之后，你会得到 app...组件 │ ├── user-list.component.html // 页面骨架 │ ├── user-list.component.scss..., OnDestroy, OnInit } from '@angular/core'; @Component({ selector: 'app-tooltip', // 标识符，表明我这个组件叫做啥.../tooltip.component.html', // 本组件的骨架 styleUrls: ['....目前的效果如下：我们实现的 tooltip 是底部居中展示，也就是我们平常使用框架，比如 angular ant design 中 tooltip 的 bottom 属性。

1.4K1 0

AngularJS 1 教程

从使用角度来说脏检查从性能角度来说脏检查指令 directive，以及用指令写组件 Promise 为什么需要前端框架随着浏览器性能提升，更多Web Page演变为Web App，特别是在中大型的项目中...，就需要一个前端框架来: 解耦应用的逻辑，数据模型，和界面视图更加方便的多人协作基本组件的抽离复用相对低成本的性能保证方便测试 …… 为什么2016年的今天仍然可以学习Angular 1 眼下潮流的框架太过于现代...而且变化非常快，一些需要写前端的后端人员可能力不从心而学习AngularJS 1 只需要基础的前端知识即可，Angular 1 属于经典的MVC类框架，API已经非常稳定，社区成熟，对低版本浏览器支持好...必要时候使用指令 directive 指令 directive，以及用指令写组件指令是Angular中相对低层，却又非常强大的功能。...扩展来说，在 **今天主流组件化的潮流之下，Angular 1完全可以依赖directive来按照component-based的方式书写框架，**甚至这点已经是目前Angualr 1社区中潮流用法:Component-Based

4.6K3 0

Angular Input和Output

Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。...通过 setter 和 getter 方式，我们对类中的私有属性进行了封装，能避免外界操作影响到该私有属性。...decrement()"> - ` }) export class CounterComponent { _count: number = 0; // 默认私有属性以下划线开头，不是必须也可以使用...是不是感觉有点抽象，我们马上实战一下。...ngModel 使用过 Angular 1.x 的读者，应该很熟悉 ng-model 这个指令，我们通过它来实现数据的双向绑定。那么在 Angular 中有对应的指令么？

2.3K5 0

AngularDart 4.0 高级-结构指令顶

您将在本指南中学习到星号（*）是一种便利的符号，字符串是一种微型语法，而不是通常的模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代的标记。...NgIf指向指令类; ngIf引用指令的属性(attribute)名称。指令类拼写使用UpperCamelCase（NgIf）。指令的属性名称拼写使用lowerCamelCase（ngIf）。...为什么要移除而不是隐藏？指令可以通过将其显示样式设置为无隐藏不需要的段落。...是Angular解析器识别的语法元素。它不是指令，组件，类或接口。...指令类名称以Directive结尾。 Angular自己的指令不会。

16K2 0

Angular 2.x折腾记：(1)初识Angular-cli及脱坑要点

前言这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！...rc期间坑了太多次，每次升级各种酸爽； rc2开始基本变化不大，可以直接拿来用了。...正式版的配置稍微有些改动，我比较了下基本不大，放心使用系统环境配置 window 安装lts版本的nodejs v6.10.0 ， Angular-cli中的node-sass不支持7.x，装不上的...初始化项目脚手架的命令很多，我这里只列出最常用的；新建东东范围命令作用 new ng new new_project 初始化新项目 Component ng g component my-new-component...新建一个组件 Directive ng g directive my-new-directive 新建一个指令 Pipe ng g pipe my-new-pipe 新建一个管道 Service ng

1191 0

Angular快速学习笔记（3） -- 组件与模板

template，而不是templateUrl，template可以直接书写html代码，简单的html推荐这种方式 @Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫...angular提供两种地方存放组件模板你可以使用 template 属性把它定义为内联的，或者把模板定义在一个独立的 HTML 文件中，再通过 @Component 装饰器中的 templateUrl...public id: number, public name: string) { } } 使用这个类： src/app/app.component.ts (heroes)： heroes...模板语法 Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（组件）和面向用户的模板来与用户交互。...模板绑定是通过 property 和事件来工作的，而不是 attribute. 数据绑定的目标是 DOM 中的某些东西。

15.2K3 0

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

然后我将展示如何封装第三方组件作为 Angular 组件，以及如何使用输入输出机制实现组件间通信（译者注：Angular 组件间通信输入输出机制可参考官网文档），最后将展示如何使用 ControlValueAccessor...组件而不是使用原生表单控件，而通常自定义表单控件会封装一个使用纯 JS 写的控件如 jQuery UI's Slider。...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你在 html 使用的表单控件，但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互，而不是原生表单控件如...并且被 Angular 用来和 formControl同步，通常是使用组件类或指令来注册。...我们直接在组件装饰器里直接指定类名，然而 Angular 源码默认实现是放在类装饰器外面： export const DEFAULT_VALUE_ACCESSOR: any = { provide:

3.7K2 0

Angular 从入坑到挖坑 - 表单控件概览

从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览三、Knowledge Graph ?...而响应式表单在表单数据发生变更时，FormControl 实例会返回一个新的数据模型，而不是直接修改原来的数据模型 4.2、模板驱动表单通过使用表单的专属指令（例如 ngModel 进行双向数据绑定）...在使用 ngModel 进行模板绑定时，angular 在 form 标签上自动附加了一个 NgForm 指令，因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素，而...，在设定规则时，需要将模板中控件名对应的数据值的第二个参数改为验证的规则在响应式表单中，数据源来源于组件类，因此应该在组件类中直接把验证器函数添加到对应的 FormControl 的构造函数上。...在模板驱动表单中，因为不是直接使用的 FormControl 实例，因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K2 0

Angular CLI 常用终端操作命令

| ng g component home/component/my-new-component //相对生成组件生成位置在项目的根目录的 src/app/home/component...（指令其他等等都可以用该方式生成）指令| ng g directive my-new-directive 管道| ng g pipe my-new-pipe...该--routing选项还会生成与模块名称相同的默认组件。您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...更多angular-cli配置 https://github.com/angular/angular-cli/wiki 组件| ng g component my-new-component 指令|...ng g directive my-new-directive 管道| ng g pipe my-new-pipe 服务| ng g service my-new-service 类| ng

2.1K4 0

Angular 2 + 折腾记：(1)初识Angular-cli及脱坑要点

前言这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！...，已经迁移,之前npm install angular-cli不推荐；目前最新的是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次，每次升级各种酸爽； rc2开始基本变化不大，可以直接拿来用了...正式版的配置稍微有些改动，我比较了下基本不大，放心使用 ---- 安装之前 window下：安装lts版本的nodejs[6.10.0] ， Angular-cli中的node-sass不支持7.x，...初始化新项目 Component ng g component my-new-component 新建一个组件 Directive ng g directive my-new-directive 新建一个指令...pipe my-new-pipe 新建一个管道 Service ng g service my-new-service 新建一个服务 Class ng g class my-new-class 新建一个类

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云