angular知识点梳理第二篇-基本语法

2022-05-09 19:30:49 浏览数 (1)

文章目录
  • 前文回顾
  • 基本语法
    • 常见指令
    • NgModel
    • NgFor
    • NgIf
    • Ng-container
    • 管道

前文回顾

前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些angular的基本语法，这样有利于后面我们进行梳理别的知识点做一些铺垫

基本语法
常见指令
NgModel

NgModel就和vue中的v-model的效果是一致的，只是写法会有一些区别，vue中是可以直接进行使用的，但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变！

  • 在app.modules.ts中引入forms模块
代码语言：javascript复制
// 核心模块
import { NgModule } from '@angular/core';
//引入forms模块实现数据的双向绑定
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [],
  // 配置当前模块运行所依赖的其他模块
  imports: [FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • 在需要使用数据绑定的组件进行数据的处理
代码语言：javascript复制
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====>")
  } 
}
  • 数据的获取
代码语言：javascript复制
<h3>angular基本语法梳理</h3>
<!-- [(ngModel)] 是angular的绑定数据的语法 -->
<input [(ngModel)]="inputData" />
<!-- 使用{{}}进行数据的获取 -->
<span>{{inputData}}</span>
  • 运行效果
NgFor

NgFor和我们js中的for循环渲染数据是一致的，所以这里是比较容易理解的，简单的演示一下

  • 在需要使用数据绑定的组件进行数据的处理
代码语言：javascript复制
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====>")
  }
}
  • 数据视图层获取
代码语言：javascript复制
<!-- 默认的是没有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>
  • 运行效果
NgIf

NgIf指令是可以控制页面元素的显示与消失，这里和隐藏要区别开，他的效果和css中的display:none效果是一致的，和visibility:hidden是要区别开的，当if判断为false的时候，页面上是整个元素都消失了，而不是仅仅隐藏了css样式

  • 在需要使用数据绑定的组件进行数据的处理
代码语言：javascript复制
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)
  }
}
  • 数据视图层判断
代码语言：javascript复制
<br>
<button (click)="changeIsShow()">改变NgIf状态</button>
<br>
<span>当前的isShow:{{isShow}}</span>
<div *ngIf="isShow">我是一个div块</div>
  • 运行效果
  • true显示：
  • false不显示：
Ng-container

ng-container 这里有必要介绍一下，这个类比的话就喝vue的template是基本一致的，不是完全一致，我们可以将它看作一个承载体，也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹，因为他是一个不被渲染的tag，所以使用的时候是没有什么问题的，举个例子！

  • 运行效果

如果这个tag标签不太理解的，你可以将它完全当作一个容器，当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个，在html的任何场景下都可以使用！官方的话：为没有 DOM 元素的指令安排宿主

管道

管道其实就是具有一定功能的函数，主要是一些场景是对字符串什么的进行简单的转化，当然我们也可以自己使用自定义的函数进行数据的转换，只是angular给我们提供了一些初始化的功能函数管道详细列表

vue.js css angularjs

0 人点赞