Angular7教程-03-Angular常用操作(上)


本節來介紹angular中的操作以及TypeScript語法的簡單介紹。關於TypeScript語法的更為詳細的內容,打算在整個angular教程結束后再單獨介紹。

0. 安裝所需要的插件及配置插件

  1. 安裝bootstrap

    進入項目目錄,使用以下命令安裝:

    cd media
    npm install bootstrap --save
    

    然后在angular.json配置文件中添加樣式的引用。

    "styles": [
    			  "src/styles.css",
    			  "./node_modules/bootstrap/dist/css/bootstrap.min.css"
                ]
    
  2. 安裝jquery

    cd media
    npm install jquery --save
    

    在angular.json中引入jquery:

    "scripts": ["./node_modules/jquery/dist/jquery.min.js"]
    

1. angular中新建一個組件

現在我們在項目中新建一個名稱為article的組件,由於手動創建組件比較麻煩,所以我們使用angular提供的angular cli工具來創建(手動創建的方法附在文末,不感興趣的童鞋不用看),命令如下:

ng generate component article

也可使用命令的簡寫方式:

ng g c article

src/app目錄下會多出一個article文件夾,里面angular cli工具幫我們創建的4個文件,article.component.css, article.component.html,article.component.spec.ts, article.component.ts。同時,還會更新ng.modules.ts這個文件。

2. 引用組件

在根組件的模板文件app.component.html中加入<app-article></app-article>即可引用我們剛剛新建的article組件,app.component.html代碼:

<div style="text-align:center">
	<h1>
		Welcome to {{ title }}!
	</h1>
</div>
<!-- 下面是對article組件的引用 -->
<app-article></app-article>

顯示效果如下:

表明我們的article組件引用成功。

3. 組件的嵌套引用

新建一個operator組件,然后在article組件中引入operator。article.component.html模板文件內容:

<p>
  article works!
</p>
<!--  引用operator組件 -->
<app-operator></app-operator>

頁面刷新后顯示如下:

引用關系如下: 根組件(app)引用了article,article又引用了operator.

4.組件選擇器的其它定義方式

組件選擇器的定義還可以通過屬性和類的方法來定義,如下所示:

@Component({
  //selector: 'app-article',
  //selector: '[app-article]', //屬性方式
   	selector: '.app-article',//類方式
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})

則引用組件的方式也需要發生改變:

<!--屬性方式來引用-->
<div app-article></div>

<!--類方式引用-->
<div class="app-article"></div>

5. 數據模型定義以及數據綁定

將業務邏輯中的數據通過插值表達式顯示在模板文件,即html頁面上,或者將html頁面上的事件傳輸到業務邏輯。

  1. 插值表達式

    首先我們在article頁面上添加需要顯示的內容:

    <p>
      本篇文章的ID是{{id}},標題是{{title}}
    </p>
    

    同時我們在article.component.ts中定義id和title。

    export class ArticleComponent implements OnInit {
    	id:number = 1;
    	title:string = "第一篇文章";
    }
    

    頁面顯示效果如下:

  2. 屬性綁定

    在article.component.html中定義如下內容:

    文章ID:<input type="text" [value]="id" >
    文章標題:<input type="text" [value]="title">
    

    頁面顯示效果如下:

  3. 插值運算

    article.component.html代碼:

    {{ 5 + 3}}, {{ "a" + "b"}}
    

    頁面顯示效果:

  4. 事件綁定

    article.component.ts中設置一個狀態,然后新建一個函數供頁面調用,在函數中改變這個狀態。

    export class ArticleComponent implements OnInit {
    	status = "隱藏狀態";
    	changeStatus(){
    		this.status = "顯示狀態";
    	}
    }
    

    article.component.html中定義一個按鈕並綁定changeStatus()這個函數。

    {{status}}
    <button class="btn btn-info btn-sm" (click)="changeStatus()">改變狀態</button>
    

    按鈕單擊前和單擊后頁面顯示效果分別如下:

  5. 事件綁定傳遞數據

    現在我們實現當我們在input框中輸入內容的時候,內容同時顯示在輸入框的下面,article.component.html文件內容:

    <input type="text" (keyup) = "updateContent($event)"><br>
    {{content}}
    

    article.component.ts中共定義變量以及函數:

    content = "";
    updateContent(event:any){
        this.content = event.target.value;
    }
    

    頁面顯示效果:

延伸閱讀: 手動創建組件

  1. 組件創建

在app目錄下新建一個文件夾,名字叫article.在article目錄下新建article.componnent.ts的空白文件,注意文件名字的命名,article是組件名稱,component表示類型,即組件,.ts則是文件的后綴名,文件內容如下所示:

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

@Component({
	selector: 'app-article',
	templateUrl:'./article.component.html'
})

export class ArticleComponent{

}

文件內容說明:

第一行從@angular/core中引入Component裝飾器,然后建立一個普通的類ArticleComponent,並用@Component裝飾它,在@Component中,分別定義組件的選擇器名稱和模板文件。

然后在article中新建模板文件article.component.html文件內容與普通html文件無異。

  1. 組件的注冊

打開app目錄下的app.modules.ts文件,文件內容如下:

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

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

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

文件內容的說明:

  1. 上面import部分是模塊以及裝飾器的引入。
  2. declarations部分是聲明模塊的內部成員。
  3. imports部分是導入其它模塊。
  4. providers指定應用程序根級別需要使用的service。
  5. bootstrap是app啟動的根組件。
  6. export控制將那些內部成員暴露給外部使用。

修改文件內容,添加import {ArticleComponent} from './article/article.component';將模塊引入,然后在declarations中添加ArticleComponent. 修改后的內容如下所示:

//...省略部分代碼...
import { AppComponent } from './app.component';
import {ArticleComponent} from './article/article.component';  //step1 引入

@NgModule({
  declarations: [
    AppComponent,
    ArticleComponent      //step2 聲明
  ]
})
//...省略部分代碼...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM