1.新建angular項(xiàng)目
項(xiàng)目目錄:
image.png
2.使用知識(shí)簡(jiǎn)介
這里主要是父組件想子組件傳值叉弦，以及使用到生命周期。
ngOnChanges ngOnInit
3.基礎(chǔ)知識(shí)
在angular項(xiàng)目中藻糖，主要是在ts文件中進(jìn)行聲明卸奉，然后html中進(jìn)行布局。
4.index.html
在index.html入口文件中引入bootstrap颖御，然后把初始組件搞進(jìn)去
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<app-root></app-root>
</div>
</body>
</html>
index.html通過app.component.ts文件中的組件別名 <app-root></app-root>找到父組件app榄棵。
隨后在app.component.ts文件中聲明父組件要使用到的一些變量
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
_degress='';
tab_items = [];
tab_index='';
constructor(){
console.log('app-component-constructor!!!!');
this.tab_items=['全部','大專' ,'本科', '碩士', '博士']
}
select_tab(i){
this.tab_index = i;
this._degress=this.tab_items[this.tab_index];
}
ngOnInit() {
console.log('app-component-ngoninit!!!!');
this._degress = this.tab_items[this.tab_index];
}
}
然后在app.component.html中傳值給子組件：
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation" *ngFor="let tab of tab_items index as i" [class.active]="tab_index==i"
(click)="select_tab(i)">
<a href="#" [style.background]="tab_index==i?'red':''" >{{i}}{{tab}}</a>
</li>
</ul>
<span>{{_degress}}</span>
</div>
<div class="col-md-12">
<!--1. 父組件傳值給子組件-->
<app-position [degree_now]="_degress"></app-position>
</div>
</div>
子組件中的ts文件中使用@Input() 來聲明變量凝颇，然后在在組建ts文件中封裝json，這里沒有后臺(tái)直接用的一個(gè)json變量疹鳄。再通過filter進(jìn)行過濾查找想要的數(shù)據(jù)
import { Component, OnInit,Input } from
'@angular/core';
@Component({
selector: 'app-position',
templateUrl: './position.component.html',
styleUrls: ['./position.component.css']
})
export class PositionComponent implements OnInit {
@Input() degree_now='';
position=[
{
"name": "銷售經(jīng)理",
"salary": "10k-15k ",
"education": "大專",
"years_working": "經(jīng)驗(yàn)3-5年 ",
"job_nature": "全職",
"attraction": "與優(yōu)秀的人一起共事 無限發(fā)展空間",
"tags": "企業(yè)服務(wù)高級(jí) 后端開發(fā) 分布式 J2EE SOA",
"city": "上海",
"pubtime":"2017-05-24 08:22:00",
"company": {
"name": "高富帥人才網(wǎng)",
"logo": "images/logo.png",
"stage": "成熟型(D輪及以上) "
}
},
{
"name": "Java開發(fā)工程師 ",
"salary": "15k-25k",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)5-10年",
"job_nature": "兼職",
"attraction": "技術(shù)挑戰(zhàn)拧略、工作居住證、美味果盤瘪弓、運(yùn)動(dòng)健身",
"tags": "本地生活 后端開發(fā) 平臺(tái)/后臺(tái)",
"city": "杭州",
"pubtime":"2017-06-19 12:32:00",
"company": {
"name": "餓了么",
"logo": "images/logo.png",
"stage": "移動(dòng)互聯(lián)網(wǎng)/成熟型(D輪及以上) "
}
},
{
"name": "客戶經(jīng)理 ",
"salary": "5k-8k",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": "全職",
"attraction": "愛心兩餐垫蛆、水果下午茶、節(jié)日禮物腺怯、績(jī)效獎(jiǎng)金",
"tags": "企業(yè)服務(wù) 顧問",
"city": "上海",
"pubtime":"2017-03-21 14:20:00",
"company": {
"name": "泛微",
"logo": "images/logo.png",
"stage": "移動(dòng)互聯(lián)網(wǎng),企業(yè)服務(wù) / 上市公司 "
}
},
{
"name": "銷售專員 ",
"salary": "3k-5k",
"education": "大專及以上",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": "兼職",
"attraction": "節(jié)日禮物,年底雙薪,績(jī)效獎(jiǎng)金,管吃喝",
"tags": "企業(yè)服務(wù) 銷售 專員",
"city": "蘇州",
"pubtime":"2017-04-12 18:32:00",
"company": {
"name": "戀家網(wǎng)",
"logo": "images/logo.png",
"stage": "成熟型(D輪及以上) "
}
},
{
"name": "高級(jí)Java工程師 ",
"salary": "15k-30k ",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)3-5年",
"job_nature": " 全職",
"attraction": "彈性工作制袱饭，股票期權(quán)，年終獎(jiǎng)",
"tags": "java 架構(gòu)師 SSHA",
"city": "背景",
"pubtime":"2017-06-24 02:12:00",
"company": {
"name": "創(chuàng)意網(wǎng)",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "新媒體運(yùn)營(yíng)專員",
"salary": "4k-6k",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": "全職",
"attraction": "團(tuán)隊(duì)活動(dòng),節(jié)日福利,帶薪年假,股票期權(quán)",
"tags": "汽車 新媒體 自媒體 微信開發(fā) 專員\r\n",
"city": "南京",
"pubtime":"2017-06-23 08:22:00",
"company": {
"name": "網(wǎng)約車",
"logo": "images/logo.png",
"stage": "成熟型(C輪) "
}
},
{
"name": "數(shù)據(jù)挖掘工程師",
"salary": "12k-24k ",
"education": "本科及以上 ",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": "全職",
"attraction": "五險(xiǎn)一金呛占、帶薪年假虑乖、股票期權(quán)、優(yōu)秀的團(tuán)隊(duì)",
"tags": "汽車 數(shù)據(jù) 建模 數(shù)據(jù)挖掘",
"city": "蘇州",
"pubtime":"2017-06-23 10:12:00",
"company": {
"name": "網(wǎng)約車",
"logo": "images/logo.png",
"stage": "成熟型(C輪) "
}
},
{
"name": "數(shù)據(jù)建模 ",
"salary": "16k-32k ",
"education": " 本科及以上",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": " 全職",
"attraction": "節(jié)日福利,發(fā)展空間,晉升空間,股票期權(quán)",
"tags": "數(shù)據(jù)分析 金融 建模 算法 matlab",
"city": "蘇州",
"pubtime":"2017-06-23 21:12:00",
"company": {
"name": "網(wǎng)約車",
"logo": "images/logo.png",
"stage": "成熟型(C輪) "
}
},
{
"name": "數(shù)據(jù)挖掘-風(fēng)控方向",
"salary": "15k-30k",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)3-5年 ",
"job_nature": " 全職",
"attraction": "節(jié)日福利,發(fā)展空間,晉升空間,股票期權(quán)",
"tags": "專家 資深 建模 汽車 數(shù)據(jù)挖掘 大數(shù)據(jù)",
"city": "蘇州",
"pubtime":"2017-06-24 08:28:00",
"company": {
"name": "網(wǎng)約車",
"logo": "images/logo.png",
"stage": "成熟型(C輪) "
}
},
{
"name": "測(cè)試工程師 ",
"salary": "8k-15k",
"education": "博士",
"years_working": "經(jīng)驗(yàn)1-3年",
"job_nature": " 全職",
"attraction": "彈性工作制晾虑，股票期權(quán)疹味，年終獎(jiǎng)",
"tags": "測(cè)試 java",
"city": "上海",
"pubtime":"2017-06-24 05:12:00",
"company": {
"name": "創(chuàng)意網(wǎng)",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "前端開發(fā)",
"salary": "15k-30k",
"education": "碩士",
"years_working": "經(jīng)驗(yàn)3-5年",
"job_nature": " 全職",
"attraction": "彈性工作制，股票期權(quán)",
"tags": "前端 HTML5",
"city": "無錫",
"pubtime":"2017-06-24 09:00:00",
"company": {
"name": "創(chuàng)意網(wǎng)",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "HTML5",
"salary": "16k-20k",
"education": "本科及以上",
"years_working": "經(jīng)驗(yàn)3-5年",
"job_nature": " 全職",
"attraction": "彈性工作 一群文藝小騷年們等著你的加入",
"tags": "教育 音樂 直播 B2C web php",
"city": "北京",
"pubtime":"2017-06-24 9:12:00",
"company": {
"name": "創(chuàng)意網(wǎng)",
"logo": "images/logo.png",
"stage": "上市公司"
}
}
];
my_position='';
select_position=[];
constructor(){
}
ngOnChanges(){
if(this.degree_now == '全部'){
this.select_position = this.position;
}else{
let degree = this.degree_now;
this.select_position=this.position.filter(function (pos) {
return ((pos.education).indexOf(degree)!=-1);
});
}
}
ngOnInit() {
this.select_position = this.position;
}
}
最后在子組件HTML頁面進(jìn)行數(shù)據(jù)渲染就可以了：
<table class="table">
<div>
<span>{{my_name}}</span>
</div>
<tr>
<th>序號(hào)</th>
<th>職位</th>
<th>工資</th>
<th>學(xué)歷</th>
</tr>
<tr *ngFor="let info of select_position index as i"
(click)="my_name=info?.name" >
<td>{{i}}</td>
<td>{{info?.name}}</td>
<td>{{info?.salary}}</td>
<td>{{info?.education}}</td>
</tr>
</table>
image.png
Ｖ钠糙捺！需要注意的是父組件向子組件傳值會(huì)在子組件聲明中使用到@Input()
