Angular之生命周期钩子、组件交互(父组件向子组件传值)

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()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容