首页 文章

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

提问于
浏览 次
2

我的Angular2 beta.0测试应用程序有一个在页面加载时出现的HeaderFooter应用程序 . 在页眉和页脚之间是内容部分 . 第一个问题：我希望内容部分使用HeaderFooter组件在同一页面加载事件上加载Home组件 . 经过大量的研究和颠簸，它仍然没有显示负载上的两个组件 . 第二个问题：我可以通过单击 Headers 中的链接来显示测试主页内容，然后它会前进到另一个测试页面 . 它不能可靠地向后路由，并且浏览器后退和前进按钮不能可靠地路由，即2步是OK，3步不是 . 这是相关的代码：

的index.html

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

boot.ts - 据说可以在没有单独组件引导的情况下引导所有组件 . 当我在每个组件中放置bootstraps时，我得到关于选择器的Console错误，但它们对我没有任何意义 .

import { bootstrap }    from 'angular2/platform/browser';
import { HeaderFooter } from './app';
import { RouteConfig, Router, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from 'angular2/router';
bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );

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>

home.ts

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

postApartment4Rent.ts - 与home.ts相同，除了@ Component中的选择器，h1文本和类声明

selector: "postApartment4Rent",

export class PostApartment4Rent { }
javascript angular angular2-routing

1 回答

  • 0

    从阅读和尝试更多教程，我改变了 boot.ts 中的最后一行：

    bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );

    至：

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

    我还必须从 angular2/core 导入提供 .

    在页面加载时，Home组件现在同时出现在HeaderFooter组件的页眉和页脚之间 . 页面之间的路由通常是正常的，但使用浏览器后退按钮是不可靠的 . 我现在要放手，因为我现在阅读浏览器的History API是不稳定的 .

    回复于

相关问题