Angular 入门到升仙

双向数据绑定

需要在项目中导入(model)模块

导入
import { FormsModule } from '@angular/forms';

imports数组中加入 FormsModule

完整代码如下
app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
   ****
  ],
  imports: [
   ****
    FormsModule,
    ****
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

    <input [(ngModel)]="hero.name" placeholder="name">

迭代器

heroes 为迭代数据源

<li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

点击事件

点击调用onSelect方法 并且把迭代中的hero对象传递

  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">

条件渲染-非空渲染

如果为null 是get不到里面的属性的
需要if处理渲染

<div *ngIf="selectedHero">
  <label>name:
    <input [(ngModel)]="selectedHero.name" placeholder="name">
  </label>
</div>

动态添加样式

当selectedHero 对象 等于 hero 时 添加类样式 selected
hero 是当前行对象信息

 <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>

组件之间传递参数（主从组件）

a组件里面嵌套b主键
如下

<a>
	<b></b>
</a>

b组件定义属性
属性添加@Input注解
需要导入Input对应的包(java叫法)
import {****, Input} from '@angular/core';

例如b主键定义属性
@Input() hero: Hero;

a传递时代码

<a>
<!--hero为b定义的成员属性 selectedHero为a的成员属性-->
	<b [hero]="selectedHero"></b>
</a>

这样当a的成员属性selectedHero改变时 b的hero 也会改变

创建可注入的server类

ng generate service hero
在主键ts 类中 加入
constructor(private heroService: HeroService) { }
同时注入多个

 constructor( private route: ActivatedRoute,
               private heroService: HeroService,
               private location: Location) {
  }

这样组件中的类就可以操作server的方法了

#异步
暂时没搞懂

getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

 getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
  }