angular基本操作1

朱雀 2022-10-23 08:15 167阅读 0赞

## **格式化进行大写** ##

> \{ \{heros.name | uppercase\}\}

浏览器会把英雄的名字刷新显示成大写字母。  
绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。  
管道 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。

## **数据双向绑定** ##

angualr中采用ngmodule进行数据的双向绑定，语法：

> <input \[(ngModel)\]=“hero.name” placeholder=“name”>

但是使用ngmodel的时候需要先进行导入(导包从app.module.ts模块中导入)

import {  NgModule } from '@angular/core';
    import {  BrowserModule } from '@angular/platform-browser';
    
    import {  AppComponent } from './app.component';
    import {  HeroesComponent } from './heroes/heroes.component';
    import {  FormsModule } from '@angular/forms'
    
    @NgModule({ 
      declarations: [
        AppComponent,
        HeroesComponent
      ],
      //这里是该应用所需外部模块的列表。
      imports: [
        BrowserModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {  }

## **ngFor进行循环遍历** ##

> <li \*ngFor=“let hero of heroes”>

## **添加 click 事件绑定** ##

> <li \*ngFor=“let hero of heroes” (click)=“onSelect(hero)”>  
> click 外面的圆括号会让 Angular 监听这个
> 
>  *  元素的 click 事件。 当用户点击
>  *  时，Angular 就会执行表达式 onSelect(hero)。
>  *

## **css类绑定** ##

Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 \[class.some-css-class\]=“some-condition” 添加到你要施加样式的元素上就可以了.  
在 HeroesComponent 模板中的

*  元素上添加 \[class.selected\] 绑定
 *  > \[class.selected\]=“hero === selectedHero”
    
    如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它。
    
    ## **单向数据属性绑定** ##
    
    父组件hero把selectedHero绑定给子组件app-hero-detail
    
    > <app-hero-detail \[hero\]=“selectedHero”> </app-hero-detail>
    
    并在ts文件中使用input装饰器进行装饰
    
        import {  Component, OnInit, Input} from '@angular/core';
        import {  Hero } from '../hero';
        
        @Component({ 
          selector: 'app-hero-detail',
          templateUrl: './hero-detail.component.html',
          styleUrls: ['./hero-detail.component.scss']
        })
        export class HeroDetailComponent implements OnInit { 
          @Input() hero: Hero;
          constructor() {  }
        
          ngOnInit(): void { 
          }
        
        }
    
    **@Input** 父组件更新子组件  
    **@Output** 子组件向父组件发送数据
    
    ## 服务 ##
    
    **作用**  
    组件一般用来聚焦于展示数据，而把数据访问的职责委托给某个服务。
    
    **生成方式**
    
    > ng g service hero
    
    然后包中会生成一个hero.service.ts文件，
    
        import {  Injectable } from '@angular/core';
        
        @Injectable({ 
          providedIn: 'root'
        })
        export class HeroService { 
        
          constructor() {  }
        }
    
    HeroService 可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源。  
    从组件中移除数据访问逻辑，意味着将来任何时候你都可以改变目前的实现方式，而不用改动任何组件。 这些组件不需要了解该服务的内部实现。
    
    **服务提供者**  
    你必须先注册一个服务提供者，来让 HeroService 在依赖注入系统中可用，Angular 才能把它注入到 HeroesComponent 中。所谓服务提供者就是某种可用来创建或交付一个服务的东西；在这里，它通过实例化 HeroService 类，来提供该服务。
    
    为了确保 HeroService 可以提供该服务，就要使用注入器来注册它。注入器是一个对象，负责当应用要求获取它的实例时选择和注入该提供者。
    
        @Injectable({ 
          providedIn: 'root',
        })