angular组件传值 输入输出

还是利用tabbar来介绍，上代码

<app-scrollable-tab
  [menus]="topMenus"
  (tabSelected)="handleTabSelected($event)"
></app-scrollable-tab>

组件内部js

  selectedIndex = -1;
  @Input() menus: TopMenu[] = [];
  @Output() tabSelected = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

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

menus未输入 tabselected为输出

对应h5页面

<ul>
  <li *ngFor="let menu of menus; let i = index">
    <a href="#" [class.active]="i === selectedIndex" (click)="handleSelection(i)">
      {{ menu.title }}
    </a>
    <span class="indicator" *ngIf="i === selectedIndex else otherDisplay"></span>
    <ng-template #otherDisplay>
      未选中
    </ng-template>
  </li>
</ul>

output为输出属性 topbar内部点击事件处理，handleselection将选中的index传向外部组件。利用emit函数将选中的对应menu值到根组件。根组件js文件输出

  handleTabSelected(topMenu: TopMenu) {
    console.log(topMenu);
  }

点击之后效果如下：

源码地址：

https://github.com/lee727n/angularLearning