Angular學(xué)習(xí)筆記三——創(chuàng)建組件

1.創(chuàng)建組件

通過以下命令，創(chuàng)建新組件：

ng generate component users

創(chuàng)建成功后，新組件構(gòu)成如下：

新組件創(chuàng)建成功后，會被自動添加到app.module.ts中：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { UsersComponent } from './users/users.component';@NgModule({declarations: [AppComponent,UsersComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

新組件users.component.ts自動生成的代碼如下：

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-users',templateUrl: './users.component.html',styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit {constructor() { }ngOnInit(): void {}} 項目說明

@Component	一個裝飾器函數(shù)，用于為組件指定Angular所需的元數(shù)據(jù)。
selector	組件的選擇器（CSS元素選擇器）
templateUrl	組件模板文件的位置
styleUrls	組件私有CSS樣式表文件的位置
CSS元素選擇器app-users	用來在父組件的模板中匹配HTML元素的名稱，以識別出該組件
ngOnInit	生命周期鉤子，Angular在創(chuàng)建完組件后，就會立刻調(diào)用該函數(shù)，是放初始化邏輯的好地方
export	表明該組件類可以被導(dǎo)出，以便在其他地方導(dǎo)入它

2.添加屬性

在users.component.ts類中添加user屬性：

export class UsersComponent implements OnInit {user = '漢堡包';constructor() { }ngOnInit(): void {}}

在users.component.html中綁定user屬性：

{{user}}

將users組件添加到，AppComponent的模板中，即可顯示內(nèi)容。
app.component.html：

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

3.雙向數(shù)據(jù)綁定

創(chuàng)建用戶類user.ts：

export class User {id: number = 0;name: string = ''; }

在用戶組件users.component.ts中使用該用戶類：

import { Component, OnInit } from '@angular/core'; import { User } from '../../model/user';@Component({selector: 'app-users',templateUrl: './users.component.html',styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit {user: User = {id: 1,name: '漢堡包'}constructor() { }ngOnInit(): void {}}

在頁面顯示users.component.html：

<div><span>id:</span>{{user.id}}</div> <div><label>name:</label><input [(ngModel)]="user.name"> </div>

在頁面添加輸入框來編輯用戶的名字。當(dāng)用戶輸入名字時，輸入框可以同時顯示和修改name屬性。即數(shù)據(jù)從組件類流出到屏幕，并且從屏幕流回到組件類。這叫做雙向數(shù)據(jù)綁定。

但是， [(ngModel)]在默認(rèn)情況下是不可用的，它屬于FormsModule模塊，需要在app.module.ts中添加該模塊。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { UsersComponent } from './users/users.component';@NgModule({declarations: [AppComponent,UsersComponent],imports: [BrowserModule,AppRoutingModule,FormsModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

刷新頁面：

總結(jié)

以上是生活随笔為你收集整理的Angular学习笔记第三章——创建组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。