zoukankan      html  css  js  c++  java
  • 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);
       }
  • 相关阅读:
    记录s标签范例
    链表问题总结
    Hibernate学习总结
    HDU2460-Network
    CF464C-Substitutes in Number
    CF666E-Forensic Examination
    CF373C-Counting Kangaroos is Fun
    CF558E-A Simple Task
    HDU5669-Road
    CF341D-Iahub and Xors
  • 原文地址:https://www.cnblogs.com/webmc/p/11989416.html
Copyright © 2011-2022 走看看