Angular2如何独立于html基本url设置应用程序根路径
Posted
技术标签:
【中文标题】Angular2如何独立于html基本url设置应用程序根路径【英文标题】：Angular2 how to set app root path independently from html base url 【发布时间】：2017-02-20 23:19:12 【问题描述】：我正在构建一个 angular2 应用程序/小部件，它将作为插件嵌入到 TYPO3 中，可以插入到任何内容页面上。这意味着它可能以不同的根路径结束，例如：
/page1/app
/page/subpage/subpage/whatever
全局基本 url (base href=..) 已由 TYPO3 设置，无法更改。我怎样才能给 angular 某种根前缀，以便它可以正确地建立它的路线？
我正在使用此处记录的新路由器：https://angular.io/docs/ts/latest/guide/router.html
【问题讨论】：
【参考方案1】：在最新版本的 Angular 中，我收到关于变量的错误，所以我使用数据属性来代替
<body data-base-url="whatever/"> ...
角度：
import Component, NgModule from '@angular/core';
import APP_BASE_HREF from '@angular/common';
@NgModule(
providers: [provide: APP_BASE_HREF, useValue:documnent.body.dataset.baseUrl]
)
class AppModule
【讨论】：
【参考方案2】：看本例中的APP_BASE_HREF，基本上在Angular2及以上，你可以像这样覆盖provider，这是Angular.io中展示这种情况的例子：
import Component, NgModule from '@angular/core';
import APP_BASE_HREF from '@angular/common';
@NgModule(
providers: [provide: APP_BASE_HREF, useValue: '/my/app']
)
class AppModule
所以在这种情况下，APP_BASE_HREF 将被 /my/app 替换，因此您可以为每个模块单独执行此操作...这仅适用于 Angular 应用程序...
有关更多信息，请查看 Angular 文档上的这些页面：
https://angular.io/docs/ts/latest/api/common/index/PathLocationStrategy-class.html
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
【讨论】：
【参考方案3】：实际上，角度文档中有一个解决方案，但很难找到。可以在不使用<base> 标签的情况下以角度设置基本网址。
因此，您只需使用流体将基本 url 设置为全局 javascript 变量，然后将其提供给应用模块中的 Angular。
流体：
<script>
var app_base_url = '<f:uri.page pageUid="currentPageUid" />';
</script>
角度：
declare var app_base_url;
import Component, NgModule from '@angular/core';
import APP_BASE_HREF from '@angular/common';
@NgModule(
providers: [provide: APP_BASE_HREF, useValue:app_base_url]
)
class AppModule
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
【讨论】：
感谢您发布此答案 另外云更适合在构建时使用密钥--base-href，例如：ng build --base-href=/myapp【参考方案4】：
我建议不要使用 baseURL 配置属性。它有点过时了，会导致一些问题，比如你的。
你可以设置
config.absRefPrefix = /
现在所有链接都将以 / 开头，并且也可以使用。
【讨论】：
从 TYPO3 7.6 开始可以使用config.absRefPrefix = auto 自动配置一致的路径。但是，仅此一项并不能解决 Angular2 路由的问题。
谢谢，但我认为这不能解决我的问题。此外，这个 TYPO3 安装很旧，我无法更改此设置。【参考方案5】：
原因是您的网络服务器已经在处理 URL，因此它没有委托给 Angular2 路由。要克服这个问题，您必须在 Angular 中使用不同的 LocationStrategy。
您要查找的内容称为 HashLocationStrategy 以创建类似 /page1/app/#/angular-controller/ 的路由，其中 /page1/app/ 由网络服务器提供服务，/angular-controller/ 是 Angular2 应用程序逻辑的第一个参数。
调整你的模块声明（例如app.module.ts）
import Component, NgModule from '@angular/core';
import
LocationStrategy,
HashLocationStrategy
from '@angular/common';
@NgModule(
providers: [provide: LocationStrategy, useClass: HashLocationStrategy]
)
class AppModule
在Angular2 documentation 中找到更多详细信息（示例也取自那里）。
【讨论】：
示例基于 Angular 2.0，如果您仍处于某个 RC 级别，请考虑先升级到 final。例如，RC4 和 final 之间发生了很大变化。 感谢您的回答，但我真的很想使用“真实”网址。实际上我找到了一个适用于默认策略的解决方案，并将其发布在这里。以上是关于Angular2如何独立于html基本url设置应用程序根路径的主要内容，如果未能解决你的问题，请参考以下文章
Angular2 - 从另一个独立组件调用函数。基本上，从外部组件调用函数
如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素？