angular2新路由器不会在页面加载时同时加载2个组件(头和内容)
angular2 new router will not load 2 components (head & content) simultaneously on page load
My Angular2 beta.0测试应用程序有一个HeaderFooter应用程序,它会出现在页面加载中。页眉和页脚之间是一个内容部分。第一个问题:我希望在使用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 ] );
应用
//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>
主页.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 { }
通过阅读和尝试更多教程,我将boot.ts
中的最后一行从:更改为
bootstrap( HeaderFooter, [ ROUTER_PROVIDERS ] );
至:
bootstrap( HeaderFooter, [ ROUTER_PROVIDERS, provide(LocationStrategy,
{useClass: HashLocationStrategy}) ] );
我还必须从angular2/core
导入提供。
在页面加载时,"主页"组件现在同时出现在页眉和页脚组件的页眉和页脚之间。页面之间的路由基本上是可以的,但使用浏览器后退按钮是不可靠的。我现在就让它过去,因为我读到浏览器的历史API目前是不稳定的。
相关文章:
- 如何创建带有插槽的vue js组件预加载程序
- 加载器组件仅加载一次
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 加载服务器端渲染的React组件后执行脚本
- 在reactjs组件中预加载数据
- 在foreach中加载所有项后,Knockoutjs组件回调
- ReactJS-在加载时渲染顶级组件
- 如何在reactjs中动态加载组件
- 使用ReactJS动态加载组件
- 卸载/销毁角延迟加载组件
- 使用VueJS动态加载组件和模板
- 淘汰赛3.2-'如果'基于AMD加载组件之间的转换
- 存储提取的数据,以避免每次重新加载组件时提取数据
- 使用ocLazyLoad插件加载组件和其他依赖项
- ReactJS: '类型未定义'加载组件时
- React-Native:加载组件时在后台运行一个函数
- 当改变url参数时,React路由器不会重新加载组件
- noflo:动态组件加载-组件[name]与基础[path]不可用
- ReactJS:在模态中动态加载组件的最佳方式
- JavaScript,只在需要时才加载组件/调用方法