1.新建angular项目
项目目录:
image.png
2.使用知识简介
这里主要是父组件想子组件传值，以及使用到生命周期。
ngOnChanges ngOnInit
3.基础知识
在angular项目中，主要是在ts文件中进行声明，然后html中进行布局。
4.index.html
在index.html入口文件中引入bootstrap，然后把初始组件搞进去
<!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" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
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，这里没有后台直接用的一个json变量。再通过filter进行过滤查找想要的数据
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": "销售经理",
"salary": "10k-15k ",
"education": "大专",
"years_working": "经验3-5年 ",
"job_nature": "全职",
"attraction": "与优秀的人一起共事 无限发展空间",
"tags": "企业服务高级 后端开发 分布式 J2EE SOA",
"city": "上海",
"pubtime":"2017-05-24 08:22:00",
"company": {
"name": "高富帅人才网",
"logo": "images/logo.png",
"stage": "成熟型(D轮及以上) "
}
},
{
"name": "Java开发工程师 ",
"salary": "15k-25k",
"education": "本科及以上",
"years_working": "经验5-10年",
"job_nature": "兼职",
"attraction": "技术挑战、工作居住证、美味果盘、运动健身",
"tags": "本地生活 后端开发 平台/后台",
"city": "杭州",
"pubtime":"2017-06-19 12:32:00",
"company": {
"name": "饿了么",
"logo": "images/logo.png",
"stage": "移动互联网/成熟型(D轮及以上) "
}
},
{
"name": "客户经理 ",
"salary": "5k-8k",
"education": "本科及以上",
"years_working": "经验1-3年",
"job_nature": "全职",
"attraction": "爱心两餐、水果下午茶、节日礼物、绩效奖金",
"tags": "企业服务 顾问",
"city": "上海",
"pubtime":"2017-03-21 14:20:00",
"company": {
"name": "泛微",
"logo": "images/logo.png",
"stage": "移动互联网,企业服务 / 上市公司 "
}
},
{
"name": "销售专员 ",
"salary": "3k-5k",
"education": "大专及以上",
"years_working": "经验1-3年",
"job_nature": "兼职",
"attraction": "节日礼物,年底双薪,绩效奖金,管吃喝",
"tags": "企业服务 销售 专员",
"city": "苏州",
"pubtime":"2017-04-12 18:32:00",
"company": {
"name": "恋家网",
"logo": "images/logo.png",
"stage": "成熟型(D轮及以上) "
}
},
{
"name": "高级Java工程师 ",
"salary": "15k-30k ",
"education": "本科及以上",
"years_working": "经验3-5年",
"job_nature": " 全职",
"attraction": "弹性工作制，股票期权，年终奖",
"tags": "java 架构师 SSHA",
"city": "背景",
"pubtime":"2017-06-24 02:12:00",
"company": {
"name": "创意网",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "新媒体运营专员",
"salary": "4k-6k",
"education": "本科及以上",
"years_working": "经验1-3年",
"job_nature": "全职",
"attraction": "团队活动,节日福利,带薪年假,股票期权",
"tags": "汽车 新媒体 自媒体 微信开发 专员\r\n",
"city": "南京",
"pubtime":"2017-06-23 08:22:00",
"company": {
"name": "网约车",
"logo": "images/logo.png",
"stage": "成熟型(C轮) "
}
},
{
"name": "数据挖掘工程师",
"salary": "12k-24k ",
"education": "本科及以上 ",
"years_working": "经验1-3年",
"job_nature": "全职",
"attraction": "五险一金、带薪年假、股票期权、优秀的团队",
"tags": "汽车 数据 建模 数据挖掘",
"city": "苏州",
"pubtime":"2017-06-23 10:12:00",
"company": {
"name": "网约车",
"logo": "images/logo.png",
"stage": "成熟型(C轮) "
}
},
{
"name": "数据建模 ",
"salary": "16k-32k ",
"education": " 本科及以上",
"years_working": "经验1-3年",
"job_nature": " 全职",
"attraction": "节日福利,发展空间,晋升空间,股票期权",
"tags": "数据分析 金融 建模 算法 matlab",
"city": "苏州",
"pubtime":"2017-06-23 21:12:00",
"company": {
"name": "网约车",
"logo": "images/logo.png",
"stage": "成熟型(C轮) "
}
},
{
"name": "数据挖掘-风控方向",
"salary": "15k-30k",
"education": "本科及以上",
"years_working": "经验3-5年 ",
"job_nature": " 全职",
"attraction": "节日福利,发展空间,晋升空间,股票期权",
"tags": "专家 资深 建模 汽车 数据挖掘 大数据",
"city": "苏州",
"pubtime":"2017-06-24 08:28:00",
"company": {
"name": "网约车",
"logo": "images/logo.png",
"stage": "成熟型(C轮) "
}
},
{
"name": "测试工程师 ",
"salary": "8k-15k",
"education": "博士",
"years_working": "经验1-3年",
"job_nature": " 全职",
"attraction": "弹性工作制，股票期权，年终奖",
"tags": "测试 java",
"city": "上海",
"pubtime":"2017-06-24 05:12:00",
"company": {
"name": "创意网",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "前端开发",
"salary": "15k-30k",
"education": "硕士",
"years_working": "经验3-5年",
"job_nature": " 全职",
"attraction": "弹性工作制，股票期权",
"tags": "前端 HTML5",
"city": "无锡",
"pubtime":"2017-06-24 09:00:00",
"company": {
"name": "创意网",
"logo": "images/logo.png",
"stage": "上市公司"
}
},
{
"name": "HTML5",
"salary": "16k-20k",
"education": "本科及以上",
"years_working": "经验3-5年",
"job_nature": " 全职",
"attraction": "弹性工作 一群文艺小骚年们等着你的加入",
"tags": "教育 音乐 直播 B2C web php",
"city": "北京",
"pubtime":"2017-06-24 9:12:00",
"company": {
"name": "创意网",
"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页面进行数据渲染就可以了：
<table class="table">
<div>
<span>{{my_name}}</span>
</div>
<tr>
<th>序号</th>
<th>职位</th>
<th>工资</th>
<th>学历</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
！！需要注意的是父组件向子组件传值会在子组件声明中使用到@Input()
