angular 8 ngif 指令 组件的输入输出属性

展示图(1)--指令


组件的输入和输出

首先我们要理解@Input和@Output,在这里有一个点我们要注意 EventEmitter 的引入是在@angular/core中,不是在events中

@Input: 一个装饰器,用来把某个类字段标记为输入属性,并提供配置元数据。 该输入属性会绑定到模板中的某个 DOM 属性。当变更检测时,Angular 会自动使用这个 DOM 属性的值来更新此数据属性。

@Output: 一个装饰器,用于把一个类字段标记为输出属性,并提供配置元数据。 凡是绑定到输出属性上的 DOM 属性,Angular 在变更检测期间都会自动进行更新。


展示图(1)--声明类名

这个方法是放在组件上用来将事件通知给父组件

展示图(2)--方法调用

接下来,我们在外部引用这个组件的时候,【menus】是导入的数据,(tabSelected)方法是将当前事件获取到的值通知出去,{ topMenus和headselection是在父组件中声明的数据和方法 }


展示图(3)--组件调用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. 模板语法 1. *ngFor *ngFor 是一个 "结构型指令"。结构型指令会通过添加、删除和操纵它们的...
    晨曦Bai阅读 3,093评论 0 0
  • 单向从数据源到视图 单向从视图到数据源 双向 DOM property 的值可以改变;HTML attribute...
    chrisghb阅读 4,466评论 1 1
  • 一.课程简介 (注意:这里的AngularJS指的是2.0以下的版本) AngularJS的优点: 模板功能强大丰...
    壹点微尘阅读 4,457评论 0 0
  • 组件基础 组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单...
    oWSQo阅读 5,190评论 0 0
  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 9,223评论 0 3