WangShuXian6
commented
5 years ago 双向绑定
[(ngModel)] 是 Angular 的双向数据绑定语法
ngModel 是一个有效的 Angular 指令 它属于一个可选模块 FormsModule
这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name
<div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"> </label> </div>
每个组件都必须声明在（且只能声明在）一个 NgModule 中
*ngFor
*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素
<ul> <li class="heros" *ngFor="let hero of heroes"> <span>{{hero.id}}--{{hero.name}}</span> </li> </ul>
click 事件绑定
click 外面的圆括号会让 Angular 监听这个
元素的 click 事件。 当用户点击 时，Angular 就会执行表达式 onSelect(hero)。 Angular 会把所点击的
上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。 <ul> <li class="heros" *ngFor="let hero of heroes" (click)="onSelect(hero)"> <span>{{hero.id}}--{{hero.name}}</span> </li> </ul>click 事件处理器
import {Component, OnInit} from '@angular/core'; import {Hero} from '../hero'; import {HEROES} from '../mock-heroes';
@Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'harry potter' };
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
constructor() {
}
ngOnInit() {
}}
#### *ngIf 隐藏空白的详情
```html
<h2>{{hero.name | uppercase}} details</h2>
<div><span>id:</span>{{hero.id}}</div>
<div><span>name:</span>{{hero.name}}</div>
<div>
<label for="">
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
<ul>
<li class="heros"
*ngFor="let hero of heroes"
(click)="onSelect(hero)">
<span>{{hero.id}}--{{hero.name}}</span>
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
</div>CSS 类绑定
[class.some-css-class]="some-condition" [class.selected]="hero === selectedHero"
<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>.selected{ color: yellow; }
主从组件
单向数据绑定 属性绑定语法 [hero]="selectedHero"
父组件 把 HeroesComponent.selectedHero 绑定到该元素的 hero 属性
<app-hero-detail [hero]="selectedHero"></app-hero-detail>子组件 hero 属性必须是一个带有 @Input() 装饰器的输入属性，因为外部的 HeroesComponent 组件将会绑定到它
导入 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.less'] }) export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
// 带有 @Input() 装饰器的 hero 属性
// HeroDetailComponent 模板中绑定了组件中的 hero 属性，它的类型是 Hero
constructor() {
}
ngOnInit() {
}}
```html
<div *ngIf="hero">
<h2>{{hero.name | uppercase}}</h2>
<div>id:{{hero.id}}</div>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
组件对应的模板代码
代码结构：
给 home 和 jokes 分别加了一个 module 文件和一个 routes 文件。
对于所有想使用 UserInfo 的模块来说，只要 import 这个 SharedModule 就可以了
Angular
官方版本发布计划：
ng
angular cli 使用 cdn 资源
設定方式1
設定方式2