Angular中实现一个简单的toDoList(待办事项)示例代码

淡淡的烟草味﹌ 2023-10-07 13:51 49阅读 0赞

## 场景 ##

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105570017][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]

Angular新建组件以及组件之间的调用：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105694997][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]

通过以上搭建起Angular项目。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

然后新建一个search组件

ng g component components/search

后面是跟的app下的组件的路径和组件名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

然后修改组件中的html

然后修改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中的内容显示居中，在scss中添加

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

然后修改app.components.html，将search组件显示在项目主页面上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

### 效果 ###

![20200428170918807.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200428170851257.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200428170912449.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20200428170918807.gif]: https://img-blog.csdnimg.cn/20200428170918807.gif