Gracias por cualquier ayuda, entiendo que esta puede ser una nueva pregunta ... pero no puedo ver lo que me falta y no tengo problemas de compilación en mi TypeScript.

Estoy tratando de hacer algo bastante simple, quiero tener una variable que me diga cuál de mis elementos del menú principal está seleccionado.

Así que enlacé mi HTML con varias variables como esta: (si sabe cómo podría enlazar un valor de enumeración directamente, lo agradeceré).

<div id ="menu_popular" class="{{menuClass}}" style=" left:90px; top:368px;">
  Menu Item
</div>

Entonces quiero actualizar mis declaraciones de código invocando una función selectMenu como esta:

import {Component} from '@angular/core';
import {MainMenuItem} from './domain';

@Component ({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
export class AppComponent
{
  title = 'Angular App';
  menuClass = 'div.menu_text';

}

let selectedItem: any = MainMenuItem.POPULAR;

const selectMenu = function (item: MainMenuItem) {
  console.log ('Switching Selected Menu from: ' + selectedItem + ' to: ' + item);
  selectedItem = item;
  console.log('Asigned');
  console.log(this.AppComponent.menuClass);
  if (item === MainMenuItem.YEIIIII)
  {
 ...
 selectMenu (MainMenuItem.YEIIIII);

Pero me enviaré un error de tiempo de ejecución indicando No se puede leer la propiedad 'AppComponent' de undefined

Parece que no puedo alcanzar los valores de AppComponent de ninguna manera

console.log(this.AppComponent.menuClass);

O

console.log(this.menuClass);

Qué estoy haciendo mal :(

¡Gracias!

0
Chuck 15 nov. 2017 a las 03:48

2 respuestas

La mejor respuesta

Supongo que tiene varios elementos de menú que se pueden seleccionar. Una solución simple es almacenar todos los elementos de menú en una matriz en su archivo .ts.

menuItem:string[] = ['item1', 'item2', 'etc'];
selectedItem: number = 0;
menuClass = 'div.menu_text';  

Y luego, en su archivo html, puede mostrarlos así.

<div
    *ngFor="let item of menuItem; let i=index"
    (click)="selectedItem = i"
    [ngClass]="selectedItem==i ? menuClass:''">{{item}}
</div>

Lo que hace el html es recorrer la matriz menuItem y rellenar la vista. En este caso, poblaría 3 divs. Eso lo hace let item of menuItem. Como puede ver, no solo estamos haciendo un bucle, también hemos declarado una variable de índice dentro del bucle for. Cada menuItem que se genera en la vista también contiene un evento de clic. OnClick establecemos el selectedItem en el valor del índice. Y por último, pero no menos importante, tenemos la [ngClass] que es una directiva angular que permite nosotros para agregar clase en una condición. selectedItem==i ? menuClass:''. Si selectedItem es igual al índice de div menuItem, agregamos menuClass que se declara en .ts else ''.

Espero que esto le dé una idea de cómo podría hacer esto. Probablemente esta no sea la mejor manera de resolver su problema, pero podría ayudarlo.

1
Andresson 15 nov. 2017 a las 01:48

No establezca el this si desea obtener el componente self. El alcance de su función es rango de su constante, si establece arrorw function obtendrá windows scope (como golbal).

código

export class AppComponent implements AfterContentInit{

  constructor(
    private elementRef:ElementRef
  ) { }

  title = 'Angular App';
  menuClass = 'div.menu_text';
  public selectedItem: any = MainMenuItem.POPULAR;

  ngAfterContentInit(){
    this.selectMenu (MainMenuItem.YEIIIII);
  }

  selectMenu(item: MainMenuItem) {
    console.log('Switching Selected Menu from: ' + this.selectedItem + ' to: ' + item);
    this.selectedItem = item;
    console.log('Asigned');
    console.log(this.menuClass);
    if (item === MainMenuItem.YEIIIII) { }
  }

}
1
Rach Chen 15 nov. 2017 a las 02:11