gpt4 book ai didi

angular - 带有angular2的非SPA

转载 作者:太空狗 更新时间:2023-10-29 17:01:32 24 4
gpt4 key购买 nike

我开始使用 angular2(带有 express.js 后端),目的是将页面的几个部分的控制权传递给 angular2 组件,但我最终意识到,当 angular2 控制页面的整个区域时,系统会更加有效页。但是,我的应用程序不是 SPA,除了保存我的 angular2 根组件的选择器的路由之外,还有其他服务器呈现的路由。

我有 2 个问题,后面是代码片段:

  1. 每当我加载服务器控制的路由时,其服务器端呈现的模板不包含我的根组件的选择器,<main-comp></main-comp> , angular2 基本上吐进了控制台,说它没有任何地方可以初始化。我将所有 angular2 初始化代码放在整个应用程序的共享 header 中。如果 angular2 根组件的选择器根本不存在于页面上,是否有办法告诉它不要呈现自身?

  2. 呈现 angular2 根组件的服务器端路由是 /writing特定博客文章的 angular2 路由 URL 类似于 /writing/2016/03/post .但是,每当我直接浏览 URL 时,System.js 都会尝试加载相对于该位置的应用程序/启动,即 /writing/2016/03/app/boot ,这显然失败了 404。我认为这是因为我的服务器控制了 /writing。相对于向服务器请求的基本 URL 的路由和 Angular 负载。因此,我知道的唯一解决方案是将我的应用程序变成一个单服务器路由为 '/' 的 SPA。 ,这将需要对前端进行大量重写。我该如何解决这个问题?

这是我的根组件:

@Component({
selector: 'main-comp',
template: '<router-outlet></router-outlet>',
providers: [TagService, PostService, BlogStateService],
directives: [ROUTER_DIRECTIVES, BlogComponent]
})
@RouteConfig([
{path: '/writing/...', name: 'Blog', component: BlogComponent }
])
export class AppComponent {
constructor(private _blogState : BlogStateService,
private _postService : PostService) {
}
}

这里是 <head>元素:

<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>

<!-- Angular Dependencies -->
<script src="/app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/app/node_modules/es6-shim/es6-shim.js"></script>

<script src="/app/node_modules/systemjs/dist/system.src.js"></script>
<script src="/app/node_modules/moment/moment.js"></script>

<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
moment: {
main: 'moment.js',
type: 'cjs',
defaultExtension: 'js'
}
},
map: {
moment: '/app/node_modules/moment/'
}
});
</script>

<script src="/app/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/app/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/app/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/app/node_modules/angular2/bundles/router.dev.js"></script>

<script>
System.import('app/js/boot').then(null, console.error.bind(console));
</script>
<base href="/">

</head>

最佳答案

对于第一个问题,我添加了检查是否存在 <main-comp>在调用 Bootstrap 方法之前在页面上(感谢@Gunter 的想法)。

对于上面的第二个问题,我在 system.js 配置中添加了一个路径到我的启动文件,如下所示,这样 system.js 就不会加载与请求 URL 相关的应用程序/启动。

    System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
moment: {
main: 'moment.js',
type: 'cjs',
defaultExtension: 'js'
}
},
map: {
app: '/app', //<----------added this line
moment: '/app/node_modules/moment/'
}
});

关于angular - 带有angular2的非SPA,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35863819/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com