开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular2中的装饰符@Input()和@Attribute()之间的主要区别是什么？

在Angular2中，装饰符@Input()和@Attribute()之间有以下主要区别：

功能不同：
- @Input()装饰符用于将属性标记为可从父组件传递的输入属性。它允许父组件将数据传递给子组件。
- @Attribute()装饰符用于获取元素上的属性值。它用于在组件内部获取DOM元素上的属性值。

用法不同：
- @Input()装饰符通常用于组件类的属性上，用于接收父组件传递的数据。
- @Attribute()装饰符通常用于组件的构造函数参数上，用于获取DOM元素上的属性值。
数据来源不同：
- @Input()装饰符的数据来源是父组件。父组件可以通过属性绑定将数据传递给子组件。
- @Attribute()装饰符的数据来源是DOM元素上的属性。它可以用于获取HTML元素上的属性值。
使用场景不同：
- @Input()装饰符适用于需要从父组件传递数据给子组件的情况，例如父组件向子组件传递配置信息或数据。
- @Attribute()装饰符适用于需要获取DOM元素上的属性值的情况，例如获取自定义属性或特定属性的值。

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

腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）
腾讯云产品：云数据库 MySQL 版（https://cloud.tencent.com/product/cdb）
腾讯云产品：云原生容器服务（https://cloud.tencent.com/product/tke）
腾讯云产品：人工智能（https://cloud.tencent.com/product/ai）
腾讯云产品：物联网（https://cloud.tencent.com/product/iotexplorer）
腾讯云产品：移动开发（https://cloud.tencent.com/product/mobdev）
腾讯云产品：对象存储（https://cloud.tencent.com/product/cos）
腾讯云产品：区块链服务（https://cloud.tencent.com/product/bcs）
腾讯云产品：腾讯云游戏引擎（https://cloud.tencent.com/product/gse）
腾讯云产品：腾讯云直播（https://cloud.tencent.com/product/live）

相关搜索:$request->name和$request->input('name')之间的区别 ANSI C和K&R C之间的主要区别是什么？ASP.NET MVC和FubuMVC之间的主要区别是什么？CLTL2和ANSI CL之间的主要区别是什么？defer()和defer{}之间的区别是什么 ElasticSearch和OpenSearch之间的主要区别是什么？Haskell 和 F# 之间的主要区别是什么？HTTPServletResponse和ResponseEntity之间的区别是什么？Laravel中$object->属性和$object['attribute']的区别 MULE Studio和MULE ESB的主要区别是什么？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ionic3应该善用组件和指令

其实ionic3（angualr4）和ionic2（angular2）差不多，但和ionic1（angular1）就差别非常大了，可以说基本是推倒了重来。在angular1时代，组件和指令是一回事，即严格来说，没有组件这概念，只有指令，而到了angular2时代，虽说组件仍是一种特殊的指令，但已经有一定目的明显区分开来，分别用Directive和Component来标识，用cli生成命令就如下所示：

04

Angular2、Ionic、TypeScript、es6的关系？

其实对于这3个东西来说，我根本搞不清楚他们之间的关系，突然之间意识到，自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的，自己还是什么都不会，angular1我会用，但是不会讲，你要问我angular1和ionic的关系，我现在也不能讲清楚，说明白。那么没关系，从小白做起，不会的就问，据说大神们都是乐于分享的。

03

AngularJS2.0 教程系列（一）

AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的提升已经非常困难了。

01

Angular2 VS Angular4 深度对比：特性、性能

在Web应用开发领域，Angular被认为是最好的开源JavaScript框架之一。

02

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

本文选自《迈向Angular 2》，让我们看看Angular2解决了哪些在1.x版本中困扰我们的问题。

01

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

前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后的维护.那么就要学习agular2了.

02

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

一、版本说明原始版本： 2.0.0-beta.6 目标版本： 4.1.1 新增脚手架： Angular-cli 脚手架版本： 1.0.0-rc.1 升级后主要依赖版本如下： "dependenci

00

为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较？

Vue.js 是一个用来构建 web UI 的 JavaScript 库，基于 MIT 开源协议。Vue.js 于 2013 年首次分布，但是在接下来的两年内，并没有太多的 web 框架领域的开发者关注。到了 2016 年，Vue.js 名声大噪，获得了极大的关注，以至于现在除了像 Angular 和 React 这样的重量级 JavaScript 库，又多了 Vue.js 这样的一个选择。

03

Vuejs和其他前端框架的对比

React React 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。相似之处 React与Vue存在很多相似之处，例如他们都是JavaS

Angular2 学习第一天

directives数组包含组件模板依赖的组件或指令 providers数组包含组件依赖的服务

02

vue.js与其他前端框架的对比

React React 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。相似之处 React与Vue存在很多相似之处，例如他们都是JavaS

08

angular教程推荐

angular系列在线交互式教程： angular5教程 angular5教程全面系统地讲解了最新版的Angular5，内容不仅涵盖组件模板语法、指令和管道运用、表单运用、指令开发等基础内容，还包括依赖注入原理与应用、变化检测机制原理及应用、模块和组件的编译过程解析、视图结构等进阶技能。教程内容深入浅出、循序渐进，即适合有一定Angular基础的工程师提高学习，也适合没有接触过Angular的工程师从零学起。 angular2教程即使你没有任何AngularJS的基础，学完angular2教程也可以轻松开

02

angular5面试题_大数据面试题

Angular 更新还是非常快的，目前（2020）的速度是每年2个主版本。网上也有不少面试题，不过很多都是针对老的版本，尤其是AngularJS的。因为最近在看Angular的面试题，所以特意总结一下。下面内容都是基于Angular v8.0以上的。

02

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径。在文中，我们将会接触到很多Angular 2的重要概念，并附扩展阅读资料和自查小测试，供大家评估自己对Angular的了解程度。 Angular 经典问题及扩展阅读 1. 请解释Angular 2应用程序的生命周期hooks是什么？ Angular 2组件/指令具有

08

Angular2 之 Animations

Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations元数据属性在定义@Component装饰。就像template元数据属性！这样就可以让动画逻辑与其应用代码紧紧集成在一起，这让动画可以更容易的出发与控制。使用要点 Angular2的动画是使用模型驱动的方式在两个状态之间进行转换，是由状态和状态之间的转场效果所定义的。动画被定义在@Compone

01

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

不知道你有没有在某处见过 xxProvider，Provider 并不是 23 种经典设计模式之一，但是却应用特别多，可以算是一种比较新的模式。

03

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

不知道你有没有在某处见过 xxProvider，Provider 并不是 23 种经典设计模式之一，但是却应用特别多，可以算是一种比较新的模式。

01

Angular 2 架构（下)

数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制。

02

干货 | 前端阶段性总结之「框架相关」那些事

其实本人接触框架里面，可能是Angular最多吧，之前项目都是Angular1，现在项目在用Angular2。

02

Angular 从入坑到挖坑 - 组件食用指南

angular 入坑记录的笔记第二篇，介绍组件中的相关概念，以及如何在 angular 中通过使用组件来完成系统功能的实现

03

实战 | Change Detection And Batch Update

作者｜YanYang Yu 原文｜http://yuyang041060120.github.io/2016/09/22/change-detection-and-batch-update/ 前言在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新

02

Angular2 初体验

Angular2 已经发布 beta9 ，是时候折腾一下了。 Angular2 和 AngularJS 1.x 相比，可以说是全新的框架，除了名字有延续性之外，能延续的真的不多。

02

Angular1.x VS Angular2http请求的差别

这样写的结果就是response.json()中返回给上一层的数据就相当于angular1.x中的response.data了，所以不能再return response.json().data as any.

02

【组件篇】ionic3开源组件

平时会留意一些开源组件，收藏到收藏夹里，然后一天mac电脑因为卸载window出问题导致不能不重装，然后里面的东西都没了，特别是适用于ionic2布局的angular2和普通js……so sad，现整理回一些并分享下：

04

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

1. 显示数据在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。使用插值表达式显示组件属性要显示组件的属性，最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如 {{myHero}}。 import { Component } from '@angular/core'; @Component({ selector: 'app-root', te

03

【开发指南】（三）认识ionic3

如果你要做一个app应用，你有最少三种方式：原生开发、加壳在线WebApp开发与混合式开发。

04

给Java程序员的Angular快速指南 | 洞见

Spring + Angular 的全栈式开发，生产力高、入门难度低（此处省略一万字），是 Java 程序员扩展技术栈的上佳选择。

04

AngularJS vs Vue.js：对于两个流行前端框架的比较

多年来，Web的前端开发经历了各种各样的发展，新框架不断的涌现。如您所想，为了保持竞争优势，框架都是东拼西凑来开发的。在当今的环境下，AngularJS的开发已经获取了很大的进步，但是，也不能因为这个而不看其他框架。Vue.js在非常有限的时间内非常好的做到了所有可能方面的开发。因此，Vue.js是一个很有竞争力的框架。

03

Angular 中的数据绑定

从组件（数据）到视图：绑定组件数据到视图上，我们使用插值 Interpolation 和属性 Property 绑定。

01

Change Detection And Batch Update

在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新时，这些框架/库会帮我们更新DOM。那么这里就有两个很重要的问题了：当数据变化时，这些框架/库是如何感知到的？当我们连续更新数据时，这些框架/库如何避免连续更新DOM，而是进行批量更新？带着这两个问题，我将简要分析一下React、Angular1、Angular2及Vue的实现机制。

04

Change Detection And Batch Update

本文作者：IMWeb 吴浩麟原文出处：IMWeb社区未经同意，禁止转载前言在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的

07

Angular2里获取（input file）上传文件的内容

最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。

00

前端工程师：电信专业转前端是如何拿到阿里、腾讯offer的？

1.个人情况 ● 211本科 985硕士电信专业女生 ● 16年3月开始学习前端 ● 16年7月开始实习，共五家实习经历（不是特别厉害的厂） ● 秋招拿到两个offer（阿里、腾讯）、没错只有这两个。。其他的都挂了 2.面经阿里-阿里云 1、8.24 讲讲你的整个技术发展过程那挑一个你认为比较重要的项目仔细讲讲框架： vue和angular的区别、vue的双向数据绑定如何实现、angular的核心讲讲、vue-router 基础：跨域 es6箭头函数和普通函数的区别（箭头函数this指向继承自

06

Angular 5 快速入门与提高

尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：

02

Angular2入坑指南

序对后端开发来说，前端是神秘的，眼花缭乱的技术，繁多的框架，出名的不出名的好几百种，看是“繁荣”，其实显得杂乱无章，但是我们在做开发的时候，技术选型还是主流的那么几个：浅析angular，react，vue.js Node.js。 node 官网：https://nodejs.org/ nodejs不是一个js框架，千万不要认为是类似jquery的框架，nodejs是js运行时，运行环境，类比java中jvm。做前端的没用过nodejs都不好意思说自己是前端。nodejs是和jvm同等地位的js运行环境，

07

Angular2学习笔记

阴差阳错，当初在选择写网站的时候选择了使用Angular2+RESTfulｌ，现在想起来，这个选择可能有点轻率了。虽然这套框架我个人觉得可能的确比较适合做移动端Web的开发，但是由于网站开发的经验明显不足，加上这套技术还不是相当的成熟，在学习的过程中走了很多的弯路。而且，功利一点的讲，对于找工作的帮助可能并不是很大，很多Web相关的职务招的都是Java方向的，而我直接跳过这种传统框架直接接触新知识难免会发现基础不牢的情况。不过还好，经过这一段时间的倒腾，好歹把Angular2的东西稍微消化了一点，相比啥都不会，也算是有点收获吧。

01

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

揭秘程序员眼中的 Vue 与 Angular 一基于 Vue 的项目 1. 项目名称：基于 Vue.js 的 UI 组件库项目简介：iView 是一套基于 Vue.js 的 UI 组件库，主要服

05

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

想来想去，概念这些东西不怎么想讲，更多的是想讲点实战性的内容。所以有些东西跳过去了，小伙伴们请去看官方文档哈；跳跃性的前进，写的不好多包涵。。。

02

angular基础面试题_java web面试题

Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

05

前端人员该怎么面试经典Angular面试题有哪些[通俗易懂]

前端人员该怎么面试？经典Angular面试题有哪些？AngularJS是一个JavaScript框架，是一个以JavaScript编写的库。它可通过

08

Angular 6.x 指令快速入门

在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。

04

angular2 错误集。

ERROR in AppModule is not an NgModule 由于本人也只是略懂angular2，很多东西还不是特别的明白，对于错误的理解还不够深刻，所以对于angular2的错误尽量用最简单的方式解决。对于 ERROR in AppModule is not an NgModule 的错误，追根究底的话，应该是版本的问题，typescript的版本，具体是啥不清楚。如果解决：在自己的电脑上重新安装一个anguar2的新工程，ng new 工程名; 然后将旧app中的所有的内容copy到

07

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在？Webpack 开发中间件模块热拔插（HMR）

多个月以来，我和多个Github上的社区贡献者一起建立支持库、包，我们最终的目的是希望完成这样一个作为起点的模板，也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中，这个模板包含一下这些方面：服务端预加载（预渲染）：这样你的UI可以快速的显示，甚至在浏览器下载Javascript之前。 Webpack中间件集成：在开发期间，你不需要一直重新编译你的客户端项目，或者你可以用一个watcher工具在后台帮你做这些事。模块热拔插：在开发期间，一旦你编辑了一个Typesc

06

AngularDart4.0 指南- 模板语法一顶

学习如何编写显示数据并在数据绑定的帮助下使用用户事件的模板。 Angular应用程序管理用户看到和可以做的事情，通过组件类实例（组件）和面向用户的模板的交互来实现这一点。您可以熟悉模型 - 视图 - 控制器（MVC）或模型 - 视图 - 视图模型（MVVM）的组件/模板。在Angular中，组件扮演控制器/视图模型的一部分，模板表示视图。

01

HTML5手机APP开发入(5)

HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component，directive HTML5手机APP开发入(3) 如何实现MVC的代码重构，自定义一个Provider Service，Injectable 依赖注入 HTML5手机APP开发入门(2) 利用ionic2 向导生成一个项目并开发一个简单的通讯录的APP HTML5手机APP开发入门(1) ionic2+angular2 开发环境的配置内容完成一个登录验证的功能这里我要向大家介绍一个第三

06

Angular 2 TypeScript 环境配置（下）

我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。

02

AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

昨天一个话题说关于AngularJS2以后版本的两个小技巧，不料引出了另外一个话题，话题起始很简单： “很多的前端框架并不复杂，比如JQuery,引入即用，实时看到效果，多好。到了Angular2一直到现在的版本5，一点改进没有，还要编译，还要部署，原有的JS脚本也不能用了。” 细想起来，这个话题的帽子并不小，至少牵扯出来一个关键，AngularJS2及以后的版本，其框架之下的JS代码，跟HTML中<script>块之中的JS代码，到底是什么关系？我试着来回答一下：首先，在AngularJS2

06

NPM依赖包版本号~和^的区别及最佳实践

~会匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0 ^会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0 详细可参考http://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json

02

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例，来一步步介绍自定义属性指令的相关知识。在正式开发前，我们可以先看一下，最终效果 Stackblitz - Custom-Attribute-Directive。

03

关于在angular2中引入第三方插件或者框架(jquery)

由于本人也是初入angular2不久,很多问题也许解决了,确不知其原由,也有一些问题,解决了后面又出来同样的错误,关于这些,请谅解. 关于这个问题,我自己也是想了很久,总算是能用上了, 想在angular2中引用jquery的话,高大上的一个方法是,在package.json中的dependencies中写入,执行cnpm i;安装; "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0",

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭