Angular 2: Toggle-Untermenü (ähnlich wie jQuery slideToggle)

Question

Ich versuche, ein Untermenü in einer Liste umzuschalten, wenn auf einen Link geklickt wird.

https://plnkr.co/edit/ZoOGJD8FUbBfPgHTKlPh?p=preview

Vorlage

<ul> 
     <li><a><i class="zmdi zmdi-home"></i> Home</a></li> 

     <li> 
      <a (click)="toggleNavigationSub($event)">Profile</a> 
      <ul [@toggleHeight]="navigationSubState"> 
       <li><a>Settings</a></li> 
       <li><a>Privacy</a></li> 
      </ul> 
     </li> 
     <li> 
      <a (click)="toggleNavigationSub($event)">Messages</a> 
      <ul [@toggleHeight]="navigationSubState"> 
       <li><a>Notifications</a></li> 
       <li><a>Private</a></li> 
      </ul> 
     </li> 
</ul> 

Wie Sie I 2 Untermenüs sehen können innerhalb letzten 2 li Tags haben. Ich war in der Lage, SlideToggle Animation mit Angular2 Animationen zu erstellen, aber ich habe Probleme, es richtig zu implementieren.

Animation,

animations: [ 
     trigger('toggleHeight', [ 
      state('inactive', style({ 
       height: '0', 
       opacity: '0' 
      })), 
      state('active', style({ 
       height: '*', 
       opacity: '1' 
      })), 
      transition('inactive => active', animate('200ms ease-in')), 
      transition('active => inactive', animate('200ms ease-out')) 
     ]) 
    ] 

Funktion

navigationSubState: string = 'inactive'; 
toggleNavigationSub(event) { 
    event.preventDefault(); 
    this.navigationSubState = (this.navigationSubState === 'inactive' ? 'active' : 'inactive'); 
} 

Wenn ich die Animation durch Klicken auf die a Tag wechseln, alle Untermenüs werden in der gleichen Zeit Makeln. Wie kann ich das Umschalten für die Untermenüs einschränken, die nur dem Klick unterzogen werden?

Answer 1

Da Ihre Animationen für beide Menüs an die eine Variable angeschlossen waren, die den Status navigationSubState steuert, waren alle von jeder Umschaltaktion betroffen.

Ändern Sie stattdessen die Eigenschaft der einzelnen Zeichenfolge in eine Zuordnung von Menüname zu Zeichenfolge, und schalten Sie nur diesen Menüeintrag um. Hier

ist die forked Plunkr, und der entsprechende Code ist unten:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul> 
     <li><a><i class="zmdi zmdi-home"></i> Home</a></li> 

     <li> 
      <a (click)="toggleNavigationSub('Profile', $event)">Profile</a> 

      <ul [@toggleHeight]="navigationSubState.Profile"> 
       <li><a>Settings</a></li> 
       <li><a>Privacy</a></li> 
      </ul> 
     </li> 
     <li> 
      <a (click)="toggleNavigationSub('Messages', $event)">Messages</a> 

      <ul [@toggleHeight]="navigationSubState.Messages"> 
       <li><a>Notifications</a></li> 
       <li><a>Private</a></li> 
      </ul> 
     </li> 
    </ul> 
    `, 
    animations: [ 
     trigger('toggleHeight', [ 
      state('inactive', style({ 
       height: '0', 
       opacity: '0' 
      })), 
      state('active', style({ 
       height: '*', 
       opacity: '1' 
      })), 
      transition('inactive => active', animate('200ms ease-in')), 
      transition('active => inactive', animate('200ms ease-out')) 
     ]) 
    ] 
}) 
export class App { 
    navigationSubState: { [menu: string]: string} = { 
    Profile: 'inactive', 
    Messages: 'inactive' 
    }; 
    toggleNavigationSub(menuName: string, event: Event) { 
     event.preventDefault(); 
     this.navigationSubState[menuName] = (this.navigationSubState[menuName] === 'inactive' ? 'active' : 'inactive'); 
    } 

    constructor() { 
    } 
}