Javascript angular2新路由器在页面加载时不会同时加载2个组件（标题和内容）

我的Angular2 beta.0测试应用程序有一个HeaderFooter应用程序，显示在页面加载中。在页眉和页脚之间是一个内容部分。第一个问题：我希望内容部分与Home组件在同一页面加载事件中与HeaderFooter组件一起加载。经过大量的研究和颠簸，它仍然没有显示负载上的两个组件。第二个问题：我可以通过单击标题中的链接来显示测试主页内容，它会转发到另一个测试页面。它不能可靠地向后布线，浏览器的“后退”和“前进”按钮也不能可靠地布线，即2步正常，3步不正常。以下是相关代码：

index.html

<div>
  <residence-app><h1>Loading . . .</h1></residence-app>
</div>

app.ts

//various imports
@Component({
  selector: 'residence-app',
  templateUrl: "angular2-oPost/src/components/navigation/headerFooter.html",
  styleUrls: [ "angular2-oPost/src/commonStyles/headerFooter.css" ],
  directives: [ ROUTER_DIRECTIVES, Home, PostApartment4Rent ]
@RouteConfig( [
  new Route({ path: "/home", name: "Home", component: Home, useAsDefault: true }),
  new Route({ path: "/postApartment4Rent ",  name: "PostApartment4Rent", component: PostApartment4Rent })
] )
export class HeaderFooter { }

headerFooter.html

<header>
<!-- several divs-->
<a [routerLink]="['../Home']">Home</a>
<a [routerLink]="['../PostApartment4Rent']">Rent Apartment in hF</a>
</header> 
<div class="partialPage">
  <router-outlet></router-outlet>
</div>
<footer>
  <!-- several divs-->
</footer>

---

通过阅读和尝试更多教程，我将

boot.ts

中的最后一行更改为：

bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );

致：

我还必须从

angular2/core

导入provide

---

在页面加载时，Home组件现在同时出现在HeaderFooter组件的页眉和页脚之间。页面之间的路由基本上是可以的，但使用浏览器后退按钮不可靠。我现在就不说了，因为我读到浏览器的历史API目前不稳定。

不要做

“./Home”

在routerLink中，它需要路由定义的名称

新路由（{path:/Home），名称：“Home”

在本例中，只需

Home

您直接引导到页眉，引导到一个

应用程序

组件，该组件包含页眉和页脚，因此您可以同时看到页眉和页脚。兰利，谢谢。我将“./Home”更改为“Home”在RouterLink中。一切都是一样的-行为没有改变。这看起来很奇怪，因为一种方法是调用文件层次结构，另一种方法是调用组件，但两种方法都可以。第二种方法是-boot.ts，它从文件app引导组件HeaderFooter。ts HeaderFooter在页面loa上同时显示页眉和页脚d、 我的问题是，主页组件在页面加载时没有显示在页眉和页脚之间。我从headerFooter.htmlar中包含路由器出口的div中只得到一个空白。你这样写吗？：

Home

控制台中有任何错误吗？是的，它完全是这样写的。无论以何种方式写，都没有控制台错误hout../I也遇到类似问题。路由器将仅加载容器组件，而不会加载子组件。再次尝试时，单击路由器链接将再次加载组件。

@Component({
  selector : "home",
  styleUrls: [ "angular2-oPost/src/commonStyles/headerFooter.css" ],
  template: `
  <main>
    <h1>Home page map</h1>
  </main>
  `,
  directives: [ RouterLink ]
})
export class Home { }

selector: "postApartment4Rent",

export class PostApartment4Rent { }

bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );

bootstrap( HeaderFooter, [ ROUTER_PROVIDERS, provide(LocationStrategy, 
    {useClass: HashLocationStrategy}) ] );