美文网首页Angular
Angular基本语法

Angular基本语法

作者: 浅忆_0810 | 来源:发表于2021-05-25 22:57 被阅读0次

    1. 组件模板

    1.1 数据绑定

    数据绑定就是将组件类中的数据显示在组件模板中,当组件类中的数据发生变化时会自动被同步到组件模板中(数据驱动 DOM

    Angular 中使用差值表达式进行数据绑定,即 {{ }} 大胡子语法

    <h2>{{ message }}</h2>
    <h2>{{ getInfo() }}</h2>
    <h2>{{ a == b ? '相等' : '不等' }}</h2>
    <h2>{{ 'Hello Angular' }}</h2>
    <p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->
    

    1.2 属性绑定

    1.2.1 普通属性

    属性绑定分为两种情况,绑定 DOM 对象属性和绑定HTML标记属性

    1. 使用 [属性名称] 为元素绑定 DOM 对象属性

      <img [src]="imgUrl" />
      
    2. 使用 [attr.属性名称] 为元素绑定 HTML标记属性

      <td [attr.colspan]="colSpan"></td> 
      

      在大多数情况下,DOM 对象属性和 HTML 标记属性是对应的关系,所以使用第一种情况。但是某些属性只有 HTML 标记存在,DOM 对象中不存在,此时需要使用第二种情况,比如 colspan 属性,在 DOM 对象中就没有,或者自定义 HTML属性也需要使用第二种情况

    1.2.2 class属性
    <button class="btn btn-primary" [class.active]="isActive">按钮</button>
    <div [ngClass]="{'active': true, 'error': true}"></div>
    
    1.2.3 style 属性
    <button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button>
    <button [ngStyle]="{'backgroundColor': 'red'}">按钮</button>
    

    1.3 事件绑定

    <button (click)="onSave($event)">按钮</button>
    <!-- 当按下回车键抬起的时候执行函数 -->
    <input type="text" (keyup.enter)="onKeyUp()"/>
    
    export class AppComponent {
      title = "test"
      onSave(event: Event) {
        // this 指向组件类的实例对象
        console.log(this.title) // "test"
      }
    }
    

    1.4 使用 模板引用变量获取原生 DOM 对象

    1.4.1 在组件模板中获取
    <input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
    
    1.4.2 在组件类中获取

    使用 ViewChild 装饰器获取一个元素

    <p #paragraph>home works!</p>
    
    import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"
    
    export class HomeComponent implements AfterViewInit {
      @ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
      ngAfterViewInit() {
        console.log(this.paragraph?.nativeElement)
      }
    }
    

    使用 ViewChildren 获取一组元素

    <ul>
      <li #items>a</li>
      <li #items>b</li>
      <li #items>c</li>
    </ul>
    
    import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"
    
    @Component({
      selector: "app-home",
      templateUrl: "./home.component.html",
      styles: []
    })
    export class HomeComponent implements AfterViewInit {
      @ViewChildren("items") items: QueryList<HTMLLIElement> | undefined
      ngAfterViewInit() {
        console.log(this.items?.toArray())
      }
    }
    

    1.5 双向数据绑定

    数据在组件类和组件模板中双向同步

    Angular 将双向数据绑定功能放在了 @angular/forms 模块中,所以要实现双向数据绑定需要依赖该模块

    import { FormsModule } from "@angular/forms"
    
    @NgModule({
      imports: [FormsModule],
    })
    export class AppModule {}
    
    <input type="text" [(ngModel)]="username" />
    <button (click)="change()">在组件类中更改 username</button>
    <div>username: {{ username }}</div>
    
    export class AppComponent {
      username: string = ""
      change() {
        this.username = "hello Angular"
      }
    }
    

    1.6 内容投影

    <!-- app.component.html -->
    <bootstrap-panel>
      <div class="heading">Heading</div>
      <div class="body">Body</div>
    </bootstrap-panel>
    
    <!-- panel.component.html -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <ng-content select=".heading"></ng-content>
      </div>
      <div class="panel-body">
        <ng-content select=".body"></ng-content>
      </div>
    </div>
    

    如果只有一个ng-content,不需要select属性。

    ng-content在浏览器中会被 <div class="heading"></div> 替代,如果不想要这个额外的div,可以使用ng-container替代这个div

    <!-- app.component.html -->
    <bootstrap-panel>
      <ng-container class="heading">Heading</ng-container>
      <ng-container class="body">Body</ng-container>
    </bootstrap-panel>
    

    1.7 数据绑定容错处理

    // app.component.ts
    export class AppComponent {
      task = {
        person: {
          name: '张三'
        }
      }
    }
    
    <!-- 方式一 -->
    <span *ngIf="task.person">{{ task.person.name }}</span>
    <!-- 方式二 -->
    <span>{{ task.person?.name }}</span>
    

    1.8 全局样式

    /* 第一种方式 在 styles.css 文件中 */
    @import "~bootstrap/dist/css/bootstrap.css";
    /* ~ 相对node_modules文件夹 */
    
    <!-- 第二种方式 在 index.html 文件中  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
    
    // 第三种方式 在 angular.json 文件中
    "styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ]
    

    相关文章

      网友评论

        本文标题:Angular基本语法

        本文链接:https://www.haomeiwen.com/subject/cchhsltx.html