javascript - Definiera routlänkar utanför apptemplet i Angular 2


Jag undrade bara om det är dålig praxis att definiera Angular2-appens routerlänkar utanför appen; eller om det finns ett bättre sätt att göra det.

I all dokumentation för Angular2 ger den exempel på routing, och den definierar länkarna inom appmallarna (se nedan).

@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['CrisisCenter']">Crisis Center</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent}
])
export class AppComponent { }

I det exemplet definierar de länkarna med <a [routerLink]="['CrisisCenter']">Crisis Center</a>.

Men vad om jag gjorde så här:

<html>
    <head></head>
    <body>
        <nav>
            <a href="#/crisis-center">Crisis Center</a>
        </nav>

        <div>
            <my-app></my-app>
        </div>
    </body>
</html>

Skulle det fungera för navigering inom appen?

Anledningen till att jag vill ha dem utanför appen är att jag har mycket behörighetshantering (dölja/visa) baserat på Symfony-variabler, så jag föredrar att hantera menyerna med det.

Svar #1

Det skulle vara okej, men huvudskälet till att använda RouteConfig och router-outlet är eftersom det laddar den delen av sidan i router-outlet utan att uppdatera sidan. Så, bara vet att om du använder vanliga ankartaggar, kommer det inte längre att vara en SPA (single page application).