Angulaires - Menu avec les catégories et les articles dans la catégorie (plus net et plus propre solution)

J'ai essayé de mettre en application super simple menu avec les catégories et les éléments à l'intérieur de la catégorie. Il fonctionne, mais probablement que c'est plus élégant et propre façon de le faire dans Angulaire.

Voici un exemple: jsfiddle.

Si je veux ajouter en regard de la catégorie ou élément suivant à l'intérieur de l'un de la catégorie alors que j'aurais à copier tous:

  • variable de modèle (comme #categoryX ou #itemX)
  • [ngClass] directive
  • (cliquez sur) déclaration de l'événement

C'est beaucoup de code réutilisable.

@Component({selector: 'menu', template: `
<nav class="menu">
  <ul class="menu__category-list">
    <li #category1 class="menu__category" 
      [ngClass]="{'active': selectedMenuCategory == category1}"
      (click)="onClickMenuCategory(category1)">
      <span>Categoty-A</span>
      <div class="menu__item-list-container">
        <ul class="menu__item-list">
          <li #item1 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item1}"
            (click)="onClickMenuItem(item1)">
              item1
          </li>
          <li #item2 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item2}"
            (click)="onClickMenuItem(item2)">
              item2
          </li>
        </ul>
      </div>
    </li>
    <li #category2 class="menu__category" 
      [ngClass]="{'active': selectedMenuCategory == category2}"
      (click)="onClickMenuCategory(category2)">
      <span>Categoty-B</span>
      <div class="menu__item-list-container">
        <ul class="menu__item-list">
          <li #item3 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item3}"
            (click)="onClickMenuItem(item3)">
              item3
          </li>
          <li #item4 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item4}"
            (click)="onClickMenuItem(item4)">
              item4
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>`
})
class MenuComponent {
    private selectedMenuCategory;
    private selectedMenuItem;

    onClickMenuCategory(eventArgs) {
        this.selectedMenuCategory = eventArgs;
    }

    onClickMenuItem(eventArgs) {
        this.selectedMenuItem = eventArgs;
    }
}
0
2019-09-18 22:34:31
source
1 réponses

Pour ma compréhension, vous voulez exécuter une fonction pour mettre à jour une table après une activité de copie et que vous ne souhaitez pas utiliser le temps de déclenchement. Actuellement Azure prise en charge de fonction comme une étape dans Azure Data Factory pipelines. Donc nous avons juste besoin de faire glisser l'azur de la fonction de pipeline dans Azure Data Factory et de fournir les informations de votre fonction(comme le nom, url,...).

enter image description here

Pour de plus amples informations, vous pouvez consulter ce tutoriel: https://azure.microsoft.com/en-us/blog/azure-functions-now-supported-as-a-step-in-azure-data-factory-pipelines/

+0
2019-09-18 23:09:09

Voir d'autres questions sur les étiquettes