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

Angular2 -未在同一模块中声明的指令不起作用

Angular2是一种流行的前端开发框架,用于构建现代化的Web应用程序。它是Angular框架的第二个版本,具有许多改进和新功能。

对于问题中提到的"未在同一模块中声明的指令不起作用",这是因为在Angular2中,指令必须在使用它们的模块中进行声明。这是为了确保指令的可用性和一致性。

具体来说,当我们在一个组件的模板中使用一个指令时,Angular会检查该指令是否在当前模块中声明。如果没有声明,Angular会抛出一个错误,指示该指令未在同一模块中声明。

为了解决这个问题,我们需要在使用指令的模块中进行声明。在Angular2中,可以通过在模块的declarations数组中添加指令来声明它们。例如,如果我们有一个自定义指令叫做CustomDirective,我们需要在使用它的模块中进行声明,如下所示:

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { CustomDirective } from './custom.directive';

@NgModule({
  declarations: [
    CustomDirective
  ],
  // 其他模块配置...
})
export class AppModule { }

通过这样的声明,我们就可以在模块中的任何组件的模板中使用CustomDirective指令了。

总结一下,Angular2要求在使用指令之前,必须在同一模块中进行声明。这样可以确保指令的可用性和一致性。在模块的declarations数组中添加指令来进行声明。

腾讯云提供了一系列与Angular2相关的产品和服务,例如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。更多关于腾讯云的产品和服务信息,请访问腾讯云官方网站:腾讯云

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

相关·内容

如何使用MLSQL帮助指令学习模块使用

前言 MLSQL 已经实现了文章描述功能 如何实现语法自解释(MLSQL易用性设计有感) 。...使用方式 在MLSQL,你只要掌握了load 语法,以及关键词model,就可以让你顺利找到并且学习和使用一个算法或者数据处理模块。...假设你已经会load语法了,以及你知道了关键词model,除此之外,你就不知道其信息了,你可能会写出如下语句: load model. `` as output; 恭喜,这个句子也是ok,我们看看它输出结果...image.png 还不错,我们了解到,算法或者数据处理模块在MLSQL是使用Train语法,并且里面有文档链接。 如果我想看到所有可用算法或者数据处理模块,我可以使用 load model....上面除了提到可以看参数,还可以看例子,只要用这个指令就行: load model.`example` where alg="RandomForest" as output; ?

92940

Angular2 @NgModule

一个模块内部可以包含组件、指令、管道,并且可以将它们访问权限声明为公有,以使外部模块组件可以访问和使用到它们。...模块是用来组织应用,通过模块机制外部类库可以很方便扩展应用,Angular2将许多常用功能都分配到一个个模块,如:FormModule、HttpModule、RouterModule。...---- NgModule主要属性如下 1.declarations:模块内部Components/Directives/Pipes列表,声明一下这个模块内部成员 ---- 2.providers...(Angular2没有模块级别的service,所有在NgModule声明Provider都是注册在根级别的Dependency Injector) ---- 3.imports:导入其他...比如导入CommonModule后就可以使用NgIf、NgFor等指令。 ---- 4.exports:用来控制将哪些内部成员暴露给外部使用。

2.1K40

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

// 表单相关 'angular2/commom' => '@angular/forms' 三、新增NgModule 官方说明 Angular 模块能帮你把应用组织成多个内聚功能块。...它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...解决办法:在app根组件声明provider注入ResultHandler服务,则整个app使用同一个实例。 3....无法从router里获取RouteParamsAPI。 原因:angular(v4.1.1),使用ActivatedRouteAPI获取路由信息。

8.1K00

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

Angular2,组件中发生任何改变总是从当前组件传播到其所有子组件。如果一个子组件更改需要反映到其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...简而言之,EventEmitter是在@ angular/core模块定义类,由组件和指令使用,用来发出自定义事件。...这通常用在setter,当类值被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...启用延迟加载Plunkr示例:  我们不需要在根模块中导入或声明延迟加载模块。 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

实战 | Change Detection And Batch Update

开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐、易错。...新手常碰到一个问题就是为啥下面的代码不起作用。...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据比较来决定是否更新UI,这点和Angular1脏值检测有点像,但是Angular2...Vue Vue模板每个指令/数据绑定都有一个对应watcher对象,当数据变化时,会触发watcher重新计算并更新相应DOM。...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.2K20

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

项目名称:基于 Vue.js UI 组件库 项目简介:iView 是一套基于 Vue.js UI 组件库,主要服务于 PC 界面的后台产品。...整套组件借鉴了 UI Bootstrap 等开源组件写法,主要对指令进行了自己封装,我们希望通过 angular 指令编写一套类似 flex 声明式 UI 组件,使得页面代码更加简洁,可读性更强...项目名称:基于 angular2 阅图 App 项目简介:本项目是基于 ionic2 + angular2 开发阅图 App。...;双向数据绑定脏值检查优化;嵌套路由;构造函数依赖注入等等。...项目名称:基于 angular2 插件 项目简介:CodeBe ( 码B ) 是一个是使用 angular2 整合各种插件项目,包括(layer,bootstrap-table,markdown 编辑器

2K50

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

Angular2 相似,Vue 也支持“双向数据绑定”。但是,Vue 使用是单向数据流,默认数据流向是从父组件到子组件,这样在大型应用能够更容易理清数据流向。...Angular1 和 Vue.js 另一个重要区别是:“指令和组件之间分离更加清晰”。Vue 指令仅包含 DOM 操作,而组件适用于具有独立视图和数据逻辑自包含单元。...Angular2 比 Angular1 更快,Angular2 API 也引入了一些激进变化。Angular2 设计初衷是为了支撑大型企业应用,这是 Angular1 所做不到。...同时,模板一般都是声明,任何可用 HTML 标签在模板也都是可用。没有什么必要使用先进版本 JavaScript 来提升可读性。 3....理解CSS模块化 ---- ---- 小手一抖,资料全有。

1.9K30

Change Detection And Batch Update

如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用方法连续setState走是批量更新,此外走是连续更新。...新手常碰到一个问题就是为啥下面的代码不起作用 $('#btn').on('click', function() { $scope.val = 1; }); 因为我们没有用Angular1提供事件系统...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据比较来决定是否更新UI,这点和Angular1脏值检测有点像,但是Angular2更新没有副作用...Vue模板每个指令/数据绑定都有一个对应watcher对象,当数据变化时,会触发watcher重新计算并更新相应DOM。...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.3K40

Change Detection And Batch Update

如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用方法连续setState走是批量更新,此外走是连续更新。...新手常碰到一个问题就是为啥下面的代码不起作用 $('#btn').on('click', function() { $scope.val = 1; }); 因为我们没有用Angular1提供事件系统...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据比较来决定是否更新UI,这点和Angular1脏值检测有点像,但是Angular2更新没有副作用...Vue模板每个指令/数据绑定都有一个对应watcher对象,当数据变化时,会触发watcher重新计算并更新相应DOM。...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.7K70

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

本文选自《迈向Angular 2》,让我们看看Angular2解决了哪些在1.x版本困扰我们问题。...在《迈向Angular2》第4 章,将会学习如何用Angular 2组件和指令来取代AngularJS1.x 控制器功能。...Scope AngularJS 数据绑定机制是利用scope 对象来实现。我们首先在scope 对象上添加各种属性,然后在模板显式声明需要绑定这些属性(单向绑定或者双向绑定都可以)。...DI 可以带来很多好处,比如:易测试性、更好代码结构和模块化,以及更简洁明了。虽然在1.x 版本DI 运行得相当不错,但是Angular 2 对它进行了进一步发挥。...在《迈向Angular2》第4 章Angular 2 组件和指令,我们会讨论Angular 2 模板。

2.7K10

angular基础面试题_java web面试题

@NgModule({ imports: [ BrowserModule ],导入表) —— 那些导出了本模块组件模板所需其它模块 providers: [ Logger...], 本模块向全局服务贡献那些服务创建器。...exports: [ AppComponent ], 导出表 那些能在其它模块组件模板中使用声明对象子集。...}) 在 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观和行为指令...灵活路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用,我们应该注意哪些安全威胁?

13K50

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

,给你带来则是更多实战经验. 2.angular2简介 angular2是类似全家桶组合框架,所需要东西几乎都包办了,所以开发起来很迅速....支持 WebStorm对angular2强大支持....会被转换为1111%40qq.com,导致服务端解析失败,找了很多原因才发现是URLSearchParams这个对象用错了,angular2提供了这个对象,es6里面也有一个该对象,换成ng2对象即可...号参数风格.两种参数都保存在ActivatedRoute对象,因此下面代码route为此对象 — restful风格 配置:{path:'article/:id',component:ArticleComponent...,该指令会把uri当成一个文件,去根目录下寻找,找不到的话则内部重定向到配置/index.html.这样配置好处,对于静态资源try_files会直接找到后就返回,对于路由则会定向到/index.html

3.1K20

Angular2 初体验

准备开发环境 Angular2 通过 npm 发布, 因此推荐使用 node/npm 环境, 要开始使用 Angular2 , 先准备一个目录 learning-angular , 在这个目录初始化项目...npm install 使用 es5 开发 Angular2 应用 Angular2 是个客户端框架, 在浏览器运行, 因此使用 Javascript (es5) 来做开发也是完全可行。...首先在 HTML 页面添加 Angular2 UMD 版本 js 文件引用, 代码如下: UMD 全称是 Universal Module Definition, 符合 UMD 定义 Javascript 模块可以在任意 Javascript 环境执行。...TypeScript 最终会被编译成 JavaScript 模块 (commonjs/amd/system) , 因此需要一个模块加载器, 官方使用是 SystemJS, 因此我们要安装 SystemJS

1.6K20
领券