Question

我编写了此代码，以在活动页面更改时更改导航栏选项的css。

html：

<template>
<section>
<v-container>
  <v-row justify="end">
        <v-col cols="12" sm="4">
            <v-text-field
              label="Search by home name"
              single-line
              solo
              v-model="search"
            >
            </v-text-field>
        </v-col>
    </v-row>
    <v-row justify="start">
      <v-toolbar-title 
        class="grey--text text--darken-4 font-weight-black my-5 ml-12"
        >
        Homes List
      </v-toolbar-title>
      <v-spacer />
       <v-btn 
        class="grey--text text--darken-4 font-weight-black my-5 ml-12"
        v-on:click="refresh_home_list"
        >
        Refresh
      </v-btn>
    </v-row>
    <paginate
        name="searchQuery"
        :list="searchQuery"
        :per="12"
    >
    <v-row justify="center">
         <v-col cols="6" sm="4" v-for="home in paginated('searchQuery')"
     :key="home.id">
            <v-img
                class="white--text align-end img-rounded"
                height="150" width="150"
                contain
                v-bind:src="image_url(home.photo)"
            >
            </v-img>
            <p> {{home.name}} </p>
        </v-col>

    </v-row>
    </paginate>
    <paginate-links
        for="searchQuery"
        :show-step-links="true"
    ></paginate-links>
</v-container>
</section>
</template>
<script>

import { mapGetters,  mapActions } from 'vuex'
 export default {
 name: 'home',
 components: {
  },
  data () {
    return {
        homes: '',
        paginate: ['searchQuery'],
        search: '',
    }
  },
  computed: {
   ...mapGetters([
        'allHomes',
    ]),
    searchQuery (){
      if(this.search){
      return this.homes.filter((item)=>{
        return item.name.startsWith(this.search);
      })
      }else{
        return this.homes;
      }

  }

 },
 created() {
    this.get_home_list(),
    this.homes = this.allHomes;
},
methods: {
    ...mapActions([
        'get_home_list',
        'refresh_home_list',
    ]),
    image_url: function(image) {
      return 'https://ocrb.johnsoncaregroup.com/images/' + image
    }
},
watch: {
allHomes() {
  this.homes = this.allHomes;
}
}
}
</script>
  <style lang="scss">
   ul {
    list-style-type: none;
    padding: 0;
 }

 li {
   display: inline-block;
   margin: 0 10px;
 }
 .paginate-links.items {
   user-select: none;
   a {
    cursor: pointer;
   }
  li.active a {
   font-weight: bold;
   }
   li.next:before {
     content: ' | ';
     margin-right: 13px;
     color: #ddd;
   }
    li.disabled a {
      color: #ccc;
      cursor: no-drop;
    }
   }

   a {
    color: #42b983;
  }
  </style>

TS：

   <ul>
        <li routerLink="/" id="homePage" (click)="selected($event)"
            [ngClass]="{'default': activePage=='homePage', 'active': activePage!=='homePage' }">Home
        </li>

        <li id="placeholder" routerLink="/placeholder" (click)="selected($event)"
            [ngClass]="{'default': activePage=='placeholder', 'active':  activePage!=='placeholder' }">PlaceHolder
        </li>
    </ul>

但是我有两个我不知道的问题：

我希望能够编写public selected($event) { var target = event.target || event.srcElement || event.currentTarget; this.activePage = target["id"]; }来检查id属性，而不仅仅是将id作为硬编码字符串
如果我手动更改地址，此代码将失败，并将主页显示为活动页面，因为它是默认页面-我该如何解决？

Answer 1

Router将帮助您实现预期的行为。

<ul>
  <li [routerLink]="routes.home"
      [ngClass]="{ 'activated': currentTab === routes.home}">
    Home
  </li>
  <li [routerLink]="routes.placeholder"
      [ngClass]="{ 'activated': currentTab === routes.placeholder}">
    PlaceHolder
  </li>
</ul>
<router-outlet></router-outlet>

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  currentTab = '';

  readonly routes = {
    home: '/home',
    placeholder: '/placeholder'
  };

  constructor(private router: Router) {
    this.router.events
      .pipe(
        filter(e => e instanceof NavigationEnd),
        map((e: NavigationEnd) => e.url)
      )
      .subscribe(newUrl => {
        this.currentTab = newUrl;
    });
  }
}

您可以检查其工作原理here

ngClass最佳做法中的角度参考ID

1 个答案: