angular ngIf指令 以及组件的输入输出

ngIf 指令

 

<span *ngIf="i === selectedIndex" class="botStyle"></span>

 

组件的输入输出

 

子组件：

 

 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';   //eventEmitter  不要导错


export interface TopMenu {
  title: string;
  link: string;
}

@Component({
  selector: 'app-scroll-table-tab',
  templateUrl: './scroll-table-tab.component.html',
  styleUrls: ['./scroll-table-tab.component.css']
})
export class ScrollTableTabComponent implements OnInit {
  selectedIndex = -1;
  @Input() menus: TopMenu[] = [];
  @Output() tabSelected = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  handleSelection(index: number){
    this.selectedIndex = index;
    this.tabSelected.emit(this.menus[this.selectedIndex]);
  }
}

父组件：

HTML
<app-scroll-table-tab
 [menus]="topMenus"  //子组件menus 通过@Input 接收父组件的topMenus
 (tabSelected)="handleTabSelected($event)" //父组件通过 @Output tabSelected 把子组件menus中点击的index 接收
 ></app-scroll-table-tab>

JS

　　handleTabSelected(TopMenu: TopMenu){

    　　console.log(TopMenu);

   }