angular8 页脚

footer.component .html

<app-horizontal-grid [cols]='5' [displayCols]='5'>
  <div appGridItem *ngFor="let item of tabItem; let idx = index;">
      <img [src]="idx === selectedIndex ? item.selectedIcon:item.icon" alt="" appGridItemImage="2rem" (click)="handleClick(idx)" >
      <span appGridItemTitle="0.6rem">{{ item.title }}</span>
  </div>
</app-horizontal-grid> 

footer.component.ts

import { TabItem } from './../../domain/index';
import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css'],
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class FooterComponent implements OnInit {
  @Input() selectedIndex  = 0;
  @Output() selectedId = new EventEmitter;
  tabItem:TabItem[] = [
    {
      title: '首页',
      icon: '/assets/tabs/home.png',
      link: 'home',
      selectedIcon: '/assets/tabs/home_selected.png'
    },
    {
      title: '推荐',
      icon: '/assets/tabs/recommend.png',
      link: 'recommend',
      selectedIcon: '/assets/tabs/recommend_selected.png'
    },
    {
      title: '分类',
      icon: '/assets/tabs/category.png',
      link: 'category',
      selectedIcon: '/assets/tabs/category_selected.png'
    },
    {
      title: '聊天',
      icon: '/assets/tabs/chat.png',
      link: 'chat',
      selectedIcon: '/assets/tabs/chat_selected.png'
    },
    {
      title: '个人中心',
      icon: '/assets/tabs/my.png',
      link: 'my',
      selectedIcon: '/assets/tabs/my_selected.png'
    }
  ]
  constructor() { }
  ngOnInit() {
  }
  handleClick(idx:number){
    this.selectedIndex = idx;
    this.selectedId.emit(this.tabItem[idx]) 
  }
}

父组件  app.component.html

<app-footer [selectedIndex]="selectedIndex$ | async" (selectedId)="handleTabSelect($event)"></app-footer>

父组件  app.component.ts

import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { TabItem } from './shared/domain/index';
import { Component} from '@angular/core';
import { map,filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedIndex$:Observable<number>;
  handleTabSelect(tab:TabItem){
    this.router.navigate([tab.link]);
  }
  constructor(private router:Router){}
  ngOnInit(): void {
    /* router.events  检测路由变化
      NavigationStart:导航开始
      NavigationEnd:导航结束
      NavigationCancel:取消导航
      NavigationError:导航出错
    */
    this.selectedIndex$ = this.router.events.pipe(
      filter(ev => ev instanceof NavigationEnd),
      map((ev: NavigationEnd) => {
        const arr = ev.url.split('/');
        return arr.length > 1 ? arr[1] : 'home';
      }),
      map(tab => this.getSelectedIndex(tab))
    );
  }
  getSelectedIndex(tab:string){
    return tab === 'recommend'
    ? 1 : tab === 'category' 
    ? 2 : tab === 'chat' 
    ? 3 : tab === 'my' 
    ? 4 :0
  }
}

可以去git下载https://github.com/yyk316507/angualr8-demo.git

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页