场景
Angular介绍、安装Angular Cli、创建Angular项目入门教程:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
Angular新建组件以及组件之间的调用:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
通过以上搭建起Angular项目。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
然后新建一个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中的内容显示居中,在scss中添加
.search{
width: 400px;
margin: 20px auto;
input{
margin-bottom: 20px;
width: 300px;
height: 32px;
}
button{
height: 32px;
width: 80px;
}
}
然后修改app.components.html,将search组件显示在项目主页面上
效果