4. 子组件向父组件传参

1、子组件代码

//child.component.ts

import { Component,OnInit,Input,Output,EventEmitter } from '@angular/core';
//组件，生命周期钩子-初始化完成，输入，输出
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() list: string[] = [];
  //输出选中下标，事件
  @Output() selNum = new EventEmitter<number>();
  current = -1;
  constructor() { }
  ngOnInit(): void {
    
  }
  setCurrent(i: number) {
    this.current = i;
    this.selNum.emit(i);//把设置的值发射出去，传给父组件
  }
}

<!-- child.component.html -->
<p>child works!</p>
<ul>
  <li class="item" [ngClass]="{'active':i==current}" *ngFor="let item of list;let i=index" (click)="setCurrent(i)">{{item}}</li>
</ul>

<style>
    .item.active{
        background-color: orange;
    }
</style>

2、父组件代码

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myng';
  list=['Vue','React','Angular'];

  setType(i:number){
    console.log(i);
  }
}

 

<!-- app.component.html -->

<h1>angular组件</h1>
<app-child [list]="list" (selNum)="setType($event)"></app-child>