[英]angular2 new router will not load 2 components (head & content) simultaneously on page load
我的Angular2 beta.0测试应用程序有一个HeaderFooter应用程序,该应用程序在页面加载时显示。 在页眉和页脚之间是内容部分。 第一个问题:我希望Content部分在与HeaderFooter组件相同的页面加载事件上与Home组件一起加载。 经过大量研究和研究,它仍然没有显示两个组件都处于加载状态。 第二个问题:我可以通过单击标题中的链接来显示测试主页内容,并将其转发到另一个测试页面。 它不能可靠地向后路由,并且浏览器的前进和后退按钮也不能可靠地路由,即2步可以,3步不能。 以下是相关代码:
的index.html
<div>
<residence-app><h1>Loading . . .</h1></residence-app>
</div>
boot.ts-可以引导所有组件,而无需单独的组件引导程序。 当我在每个组件中放入引导程序时,会出现有关选择器的控制台错误,但它们对我没有任何意义。
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文本和class语句中的选择器
selector: "postApartment4Rent",
export class PostApartment4Rent { }
通过阅读和尝试更多教程,我将boot.ts
的最后一行boot.ts
为:
bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );
至:
bootstrap( HeaderFooter, [ ROUTER_PROVIDERS, provide(LocationStrategy,
{useClass: HashLocationStrategy}) ] );
我还必须从angular2/core
导入提供。
在页面加载时,“主页”组件现在同时出现在“ HeaderFooter”组件的页眉和页脚之间。 页面之间的路由通常可以,但是使用浏览器的后退按钮不可靠。 我暂时不要说了,因为我目前阅读的浏览器的History API不稳定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.