Ich spiele gerade mit Angular 2. Momentan frage ich mich, was der beste Weg ist, um eine dynamische Menükomponente zu implementieren. Die Idee ist, eine globale Menükomponente zu haben, die Menüelemente für jede andere Inhaltskomponente in der App empfängt.Angular 2 Dynamic Menü
Eine Idee war, eine menu.component, einen menu.service und andere Komponenten zu haben, die den Service nutzen. Der Service wird global in app.module referenziert. Die menu.components abonniert eine beobachtbare und fügt dynamisch Elemente hinzu, die eingefügt werden. Ich denke, das ist nicht die beste Lösung.
Eine andere Idee ist, dass ich den Menü-Selektor/Tag in jede Komponentenvorlage einfügen und Daten direkt in die Menükomponente einfügen. Zur Zeit habe ich festgestellt, wie man Elemente in die menu.component bringt, sodass die ngFor die Menüelemente nach der Initialisierung generiert.
Die Frage ist also: Gibt es irgendwelche "Best Practices" oder gebräuchlichen Weg, dies zu tun?
Ich denke, ich brauche ein paar Grundlagen in Angular 2, aber es wäre schön, wenn Sie mich auf dem richtigen Weg führen können. Es ist nur ein Lernprojekt :)
Hier ist ein Code von dem, was ich versucht habe:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';
import { MenuComponent } from './menu.component';
import { HomeComponent } from './home.component';
@NgModule({
imports: [BrowserModule],
declarations:
[
AppComponent
],
bootstrap: [AppComponent],
providers:
[
MenuComponent,
appRouterProviders,
HTTP_PROVIDERS
]
})
export class AppModule { }
menu.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
export class MenuItem {
name: string;
path: string;
}
@Component({
selector: 'component-menu',
template: `
<ul>
<li *ngFor="let item of menuItems"><a [routerLink]="[item.path]">{{item.name}}</a></li>
</ul>
`
})
export class MenuComponent {
public menuItems: Array<MenuItem>;
constructor() {
}
}
home.component.ts
import { Component, OnInit } from '@angular/core';
import { MenuComponent, MenuItem } from './menu.component';
@Component({
selector: 'app-home',
directives: [],
template: `<h2>Home Component</h2>
<component-menu></component-menu>`
})
export class HomeComponent implements OnInit{
private menuItems:Array<MenuItem>;
constructor(private menuComponent:MenuComponent) {
console.log('Home component ctor');
this.menuItems = [
{name:'Home', path: '/home'},
{name:'Content', path: '/content'}
];
this.menuComponent.menuItems = this.menuItems;
}
ngOnInit(){
}
}
„Dynamic erstellen Menü "ist ziemlich generisch. Sie haben keine Anforderungen für das Menü angegeben. In dieser Frage geht es auch um Meinungen, die von SO abgeraten werden. –
OK - die Idee ist, dass es eine getrennte Menükomponente gibt und jede "Inhalts" -Komponente eigene Menüelemente hat, die in diese Menükomponente übertragen werden. Klingt wirklich einfach. Ich denke, das ist ein häufiger Anwendungsfall. –
Bearbeiten Sie Ihre Frage und veröffentlichen Sie den Code, der zeigt, was Sie versuchen zu erreichen und wo Sie fehlgeschlagen sind. –