Angular 2 加载内容的顺序答案

【问题标题】：Angular 2 order of loading contentAngular 2 加载内容的顺序
【发布时间】：2016-09-26 17:01:33
【问题描述】：

使用 Angular 2，内容以“错误”的顺序加载。

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

我希望在 First.component.ts “Hello world” 内容之前看到 menu.ts 内容。但似乎来自路由器的内容在 app.compontent 的内容之前加载。当我将@Router 放在底部时，Typescript 说“预期声明”，所以这也不是解决方案。

真的没有其他方法可以在每个路由器请求中放置菜单吗？

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 { }

【问题讨论】：

标签： angularjs components router

【解决方案1】：

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

【讨论】：