基础用法 - 简书

基础用法

创建一组组建以后，会生成
css→主要负责样式
html→负责网页显示
ts→负责主要逻辑

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

//
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

//定义bean属性
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

//定义实体类
export class Hero {
  id: number;
  name: string;
}

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据
CLI 自动生成了三个元数据属性：
selector— 组件的选择器（CSS 元素选择器）
templateUrl— 组件模板文件的位置。
styleUrls— 组件私有 CSS 样式表文件的位置。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。
始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

前端设定

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

把组件绑定在主页面上

<h1>{{title}}</h1>
<app-heroes></app-heroes>

双向绑定

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

[(ngModel)] 是 Angular 的双向数据绑定语法。
这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。
缺少 FormsModule
注意，当你加上 [(ngModel)] 之后这个应用无法工作了。

AppModule
Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。这些信息被称为元数据（metadata）。

有些元数据位于 @Component 装饰器中，你会把它加到组件类上。另一些关键性的元数据位于 @NgModule 装饰器中。

最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。

导入 FormsModule
打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。
然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
imports: [
  BrowserModule,
  FormsModule
],

每个组件都必须声明在一个Ngodule中

在 src/app/app.module.ts 中
import { HeroesComponent } from './heroes/heroes.component';
declarations[  AppComponent,  HeroesComponent  ],

数组相关

定义数组

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

给一个组件添加该数组元素

import { HEROES } from '../mock-heroes';

export class HeroesComponent implements OnInit {
  heroes = HEROES;

前端循环输出

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
//循环输出，let of 显示元素，数组元素
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
//绑定事件，事件方法也在组件ts中编写
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

主从组件

一个组件依从另外一个组件
从件中导入

import { Hero } from '../hero';
import { Component, OnInit, Input } from '@angular/core';
@Input() hero: Hero;

在主件中显示从件

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

服务

最后编辑于：2018.11.25 13:58:52