場(chǎng)景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項(xiàng)目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調(diào)用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項(xiàng)目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

然后新建一個(gè)search組件

ng g component components/search

后面是跟的app下的組件的路徑和組件名

?

然后修改組件中的html

<div class="search"><input type="text" [(ngModel)]="keyword" />? <button (click)="doSearch()">搜索</button><hr><ul><li *ngFor="let item of historyList;let key=index;">{{item}}?? ------ <button (click)="deleteHistroy(key)">X</button></li></ul></div>

然后修改ts中的代碼

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-search',templateUrl: './search.component.html',styleUrls: ['./search.component.scss'] }) export class SearchComponent implements OnInit {public keyword:string;public historyList:any[]=[];constructor() { }ngOnInit(): void {}doSearch(){if(this.historyList.indexOf(this.keyword)==-1){this.historyList.push(this.keyword);}???this.keyword='';???}deleteHistroy(key){this.historyList.splice(key,1);} }

為了讓html中的內(nèi)容顯示居中，在scss中添加

.search{width: 400px;margin: 20px auto;input{margin-bottom: 20px;width: 300px;height: 32px;}button{height: 32px;width: 80px;} }

然后修改app.components.html，將search組件顯示在項(xiàng)目主頁(yè)面上

?

效果

?

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Angular中实现一个简单的toDoList(待办事项)示例代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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