Seri Angular 6+ cơ bản Biên tập hero

Biên tập hero

Ứng dụng này hiện có một tiêu đề cơ bản. Tiếp theo, bạn sẽ tạo một thành phần mới để hiển thị thông tin anh hùng và đặt thành phần đó vào vỏ ứng dụng.

Tạo component heroes

ng generate component heroes

CLI tạo một thư mục mới, src / app / Heroes / và tạo bốn tệp của HeroesComponent.

Tệp lớp HeroesComponent như sau:

//app/heroes/heroes.component.ts (initial version)

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

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

  constructor() { }

  ngOnInit() {
  }

}

Bạn luôn import biểu tượng Thành phần từ thư viện lõi Angular và chú thích lớp thành phần với @Component.

@Component là một hàm trang trí chỉ định siêu dữ liệu Angular cho thành phần.CLI đã tạo ba thuộc tính siêu dữ liệu:

1. selector: Bộ chọn phần tử CSS của thành phần
2. templateUrl: Phục hồi vị trí của tệp mẫu của thành phần.
3. styleUrls: vị trí của các kiểu CSS riêng của thành phần.

Bộ chọn phần tử CSS, 'app-heroes', khớp với tên của phần tử HTML xác định thành phần này trong mẫu của thành phần cha mẹ.

NgOnInit là một  lifecycle hook. Angular gọi ngOnInit ngay sau khi tạo một thành phần. Đó là một nơi tốt để đặt logic khởi tạo.

Luôn xuất lớp thành phần để bạn có thể nhập nó ở nơi khác ... như trong AppModule.

Thêm 1 thuộc tính

Thêm 1 thuộc tính hero vào heroescomponent với tên :"Windstorm"

//heroes.component.ts (hero property)

hero = 'Windstorm';

 Hiển thị hero

//heroes.component.html

{{hero}}

// src/app/app.component.html

//src/app/hero.ts

export class Hero {
  id: number;
  name: string;
}

// src/app/heroes/heroes.component.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 {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

//heroes.component.html (HeroesComponent's template)

// src/app/heroes/heroes.component.html (HeroesComponent's template)

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

// app.module.ts (FormsModule symbol import)

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

// app.module.ts ( @NgModule imports)

imports: [
  BrowserModule,
  FormsModule
],

import { HeroesComponent } from './heroes/heroes.component';

declarations: [
  AppComponent,
  HeroesComponent
],