angular知识点梳理第二篇-基本语法
文章目录
前文回顾
前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些angular的基本语法，这样有利于后面我们进行梳理别的知识点做一些铺垫
基本语法
常见指令
NgModel
NgModel就和vue中的v-model的效果是一致的，只是写法会有一些区别，vue中是可以直接进行使用的，但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变！
- 在app.modules.ts中引入forms模块
// 核心模块
import { NgModule } from '@angular/core';
//引入forms模块实现数据的双向绑定
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [],
// 配置当前模块运行所依赖的其他模块
imports: [FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- 在需要使用数据绑定的组件进行数据的处理
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
//声明一个需要绑定的变量
public inputData:string = ""
constructor() { }
ngOnInit(): void {
console.log("ngOnInit====>")
}
}- 数据的获取
<h3>angular基本语法梳理</h3>
<!-- [(ngModel)] 是angular的绑定数据的语法 -->
<input [(ngModel)]="inputData" />
<!-- 使用{{}}进行数据的获取 -->
<span>{{inputData}}</span>- 运行效果
在这里插入图片描述
NgFor
NgFor和我们js中的for循环渲染数据是一致的，所以这里是比较容易理解的，简单的演示一下
- 在需要使用数据绑定的组件进行数据的处理
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
//声明一个list类型的变量，用于验证NgFor
public list: Array<any> = [{
title: '栗子', id: 0
}, {
title: '苹果', id: 1
}, {
title: '橘子', id: 2
}, {
title: '香蕉', id: 3
}]
constructor() { }
ngOnInit(): void {
console.log("ngOnInit====>")
}
}- 数据视图层获取
<!-- 默认的是没有key的，这里需要key的地方需要给index重新赋值， -->
<ol>
<li *ngFor="let item of list">{{item.title}}</li>
</ol>
<!-- 将list的索引值获取到赋值给i -->
<ul>
<li *ngFor="let item of list,let i = index">{{item.title}} - {{i}} - {{item.id}}</li>
</ul>- 运行效果
ngfor运行效果
NgIf
NgIf指令是可以控制页面元素的显示与消失，这里和隐藏要区别开，他的效果和css中的display:none效果是一致的，和visibility:hidden是要区别开的，当if判断为false的时候，页面上是整个元素都消失了，而不是仅仅隐藏了css样式
- 在需要使用数据绑定的组件进行数据的处理
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
//声明一个boolean类型的变量，用于验证ngif
public isShow: Boolean = true
constructor() { }
ngOnInit(): void {
console.log("ngOnInit====>")
}
/**
* @function changeIsShow 改变isshow的状态
*/
changeIsShow() {
this.isShow = !this.isShow
console.log("当前isShow:" + this.isShow)
}
}- 数据视图层判断
<br>
<button (click)="changeIsShow()">改变NgIf状态</button>
<br>
<span>当前的isShow:{{isShow}}</span>
<div *ngIf="isShow">我是一个div块</div>- 运行效果
- true显示：
显示的效果
- false不显示：
false不显示
Ng-container
ng-container 这里有必要介绍一下，这个类比的话就喝vue的template是基本一致的，不是完全一致，我们可以将它看作一个承载体，也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹，因为他是一个不被渲染的tag，所以使用的时候是没有什么问题的，举个例子！
- 运行效果
在这里插入图片描述
在这里插入图片描述
如果这个tag标签不太理解的，你可以将它完全当作一个容器，当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个，在html的任何场景下都可以使用！官方的话：为没有 DOM 元素的指令安排宿主
管道
管道其实就是具有一定功能的函数，主要是一些场景是对字符串什么的进行简单的转化，当然我们也可以自己使用自定义的函数进行数据的转换，只是angular给我们提供了一些初始化的功能函数管道详细列表
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
