angular 模板,angular组件调用组件方法
本文带你了解angular中的组件模板，简单介绍相关知识点：数据绑定、属性绑定、事件绑定、双向数据绑定、内容投影等。希望对你有帮助！
Angular是一个使用HTML、CSS和TypeScript构建客户端应用的框架，用于构建单页面应用。【相关教程推荐：《angular教程》】
Angular是一个重量级框架，内部集成了大量开箱即用的功能模块。
Angular是为大规模应用程序开发而设计的，它提供了一个干净的松散耦合的代码组织，这使得应用程序更加整洁，更易于维护。
语言文档：
棱角分明：https://angular.io/
棱角分明的中国人：https://angular.cn/
角度CLI:https://cli.angular.io/
中文：https://angular.cn/cli:
组件模板
1、数据绑定
数据绑定是在组件模板中显示组件类中的数据。当组件类中的数据发生变化时，会自动同步到组件模板(数据驱动DOM)。
使用插值表达式进行角度数据绑定，即{{}}。
h2{{message}}/h2
h2{{getInfo()}}/h2
h2{{a==b？相等:不相等 }}/h2
h2{{Hello Angular}}/h2
p [innerHTML]=htmlSnippet/p！-转义数据中的代码-2、属性绑定
2.1 普通属性
属性绑定可以分为两种情况：绑定DOM对象属性和绑定HTML标签属性。
使用[属性名]绑定元素的DOM对象属性。
Img [src]= imgur/use [attr。attribute name]来绑定元素的HTML标签属性。
Td [attr.colspan]=colSpan/td大多数情况下，DOM对象属性和HTML标签属性是对应的，所以使用第一种情况。
但是，有些属性只存在于HTML标签中，而不存在于DOM对象中。在这种情况下，需要使用第二种情况，比如colspan属性，这是DOM对象中没有的。
或者自定义HTML属性也需要使用第二种情况。
2.2 class 属性
button class= btnbtn-primary [class . active]= is active 按钮/按钮
div [ngClass]={active: true， error: true}/div2.3 style 属性
button[style . background color]= is active？蓝色:红色按钮/按钮
Button [ng style]= { 背景色:红色 } button /button3、事件绑定
按钮(单击)= on save(event)按钮/按钮
！-按下回车键时执行该功能，以提升-
输入类型= text (keyup . enter)= onKeyUp()/导出类AppComponent {
title=测试
onSave(事件：事件){
//这指向组件类的实例对象。
this.title //测试
}
}4、获取原生 DOM 对象
4.1 在组件模板中获取
输入类型= text (keyup . enter)= onKeyUp(username . value) # username/4.2 在组件类中获取
使用ViewChild decorator获取元素。
p #paragraphhome作品！/p从“@angular/core”中导出{ AfterViewInit，ElementRef，ViewChild }
导出类HomeComponent实现AfterViewInit {
@ViewChild(paragraph )段落：ElementRefHTMLParagraphElement undefined
ngAfterViewInit
console.log(this.paragraph？nativeElement)
}
}使用ViewChildren获取一组元素
保险商实验所
li #itemsa/li
li #个项目b/li
li #itemsc/li
/uli从“@angular/core”导入{ AfterViewInit，QueryList，ViewChildren }
@组件({
选择器：“应用程序-主页”，
templateUrl:“”。/home.component.html ，
样式：[]
})
导出类HomeComponent实现AfterViewInit {
@ view children( items )items:QueryListHTMLLIElement undefined
ngAfterViewInit
console.log(this.items？toArray())
}
}5、双向数据绑定
数据组件类和组件模板的双向同步。
Angular把双向数据绑定功能放在了@angular/forms模块中，所以要实现双向数据绑定就要依靠这个模块。
从“@angular/forms”导入{ FormsModule }
@NgModule({
导入：[FormsModule]，
})
导出类AppModule { }输入类型=text [(ngModel)]=username /
Button (click)=change()更改组件类中的用户名/按钮
div username:{ { username } }/div export类AppComponent {
用户名：string=
更改(){
this.username=你好Angular
}
}6、内容投影
！app.component.html
自举面板
div class=航向测试
标题
/div
div class=body
身体
/div
/引导程序-面板！panel.component.html
div class=面板面板-默认
div class=面板标题
ng-内容选择=。标题/ng-内容
/div
div class=面板-正文
ng-内容选择=。身体/ng-含量
/div
/div如果只有一个ng-含量，不需要挑选属性。
天然气含量在浏览器中会被div class=航向测试/div替代，如果不想要这个额外的div，可以使用天然气容器替代这个第5部分。
天然气含量通常在投影中使用：当父组件需要向子组件投影数据时必须指定将数据投影到子组件的哪个位置，这时候就可以利用天然气含量标签来做一个占位符，不会产生真实的数字正射影像图元素，只会把投影的内容复制过来100纳克-容器是一个特殊的容器标签，不会产生真实的数字正射影像图元素，所以在天然气容器标签添加属性是无效的。app.component.html
自举面板
ng-容器 class=标题
标题
/ng-容器
ng-container class=body
身体
/ng-容器
/自举面板7、数据绑定容错处理
//app.component.ts
导出类AppComponent {
任务={
人：{
名称： 张三
}
}
}!-方式一-
span * ngIf= task。人“{ task。人。name } }/span
！-方式二-
span{{ task.person？name }}/span8、全局样式
/* 第一种方式在样式。钢性铸铁文件中*/
@ import ~ bootstrap/dist/CSS/bootstrap。CSS ；
/* ~ 相对节点_模块文件夹*/!-第二种方式在index.html文件中-
链接href= https://cdn。jsdelivr。net/NPM/bootstrap @ 3。3 .7/dist/CSS/自举。量滴CSS rel=样式表///第三种方式在angular.json文件中
样式:[。/node _ modules/bootstrap/dist/CSS/bootstrap。量滴 CSS ，
src/styles.css
]更多编程相关知识，请访问：编程视频！以上就是一文浅析有角的中的组件模板的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。