Angular 2 加载内容顺序

Question

使用 Angular 2，内容按 "wrong" 顺序加载。

我是 Angular 2 的新手，决定从简单的开始。

我希望在 First.component.ts "Hello world" 内容之前看到 menu.ts 内容。但似乎路由器的内容在 app.compontent 的内容之前加载。当我把 @Router 放在底部时，Typescript 说 "Declaration expected" 所以这也不是解决方案。

除了在每个路由器请求时放置菜单之外，真的没有其他方法吗？

app.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { FirstComponent } from './Components/FirstComponent/FirstComponent';

@Routes([
    {
        path: '/',
        component: FirstComponent // Hello world, loads before the component below?!
    }
])

@Component({
    'directives': [ROUTER_DIRECTIVES],
    'selector': 'app',
    'templateUrl': `/templates/FirstComponent.menu`
})
export class AppComponent {
    constructor () {}

    opened: Boolean = true;
    toggle () {
      this.opened = !this.opened;
    }
}

menu.ts

<a [routerLink]="['/']"></a><router-outlet></router-outlet>
<div class="navbar navbar-fixed-top affix-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" (click)="toggle()">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
</div>
<div class="navmenu-fixed-left offcanvas clearfix" [ngClass]="{in: opened}" id="navbar-main-menu">
  <nav class="container">
    <ul class="nav navbar-nav navmenu clearfix" role="menu">
      <li><a href="#item1">Item 1</a></li>
      <li><a href="#item2">Item 2</a></li>
    </ul>
  </nav>
</div>

First.component.ts

import { Component } from '@angular/core';

@Component({
    'selector': 'app',
    'template': `Hello World!`
})

export class FirstComponent { }

Answer 1

我不得不将 <router-outlet></router-outlet> 移到菜单下方

Angular 2 加载内容顺序

Angular 2 order of loading content

router

components

angularjs