9

我正在构建一个 angular2 应用程序/小部件，它将作为插件嵌入到 TYPO3 中，可以插入到任何内容页面上。这意味着它可能以不同的根路径结束，例如：

/page1/app
/page/subpage/subpage/whatever

全局基本 url (base href=..) 已由 TYPO3 设置，无法更改。我怎样才能给 angular 某种根前缀，以便它可以正确地建立它的路线？

我正在使用此处记录的新路由器：https ://angular.io/docs/ts/latest/guide/router.html

4

5 回答 5

16

实际上，角度文档中有一个解决方案，但很难找到。<base>可以在不使用标签的情况下以角度设置基本 url 。
因此，您只需使用流体将基本 url 设置为全局 JavaScript 变量，然后将其提供给 app 模块中的 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

于 2016-10-20T11:16:26.157 回答
2

我建议不要使用baseURLconfig 属性。它有点过时了，会导致一些问题，比如你的问题。

你可以设置

config.absRefPrefix = /

所有链接都将以 / now 开头，并且也可以使用。

于 2016-10-12T21:55:03.390 回答
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 {}
于 2018-02-22T09:46:31.457 回答
1

原因是您的网络服务器已经在处理 URL，因此它没有委托给 Angular2 路由。LocationStrategy为了克服这个问题，你必须在 Angular中使用不同的。

您正在寻找的是HashLocationStrategy创建路由，例如从 web 服务器提供的路由，并且/page1/app/#/angular-controller/是Angular2 应用程序逻辑的第一个参数。/page1/app//angular-controller/

调整你的模块声明（例如app.module.ts）

import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}

在Angular2 文档中找到更多详细信息（示例也取自那里）。

于 2016-10-12T08:45:04.240 回答
0

看本例中的 APP_BASE_HREF，基本上在 Angular2 及以上版本中，您可以像这样覆盖提供程序，这是 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

于 2017-04-08T03:35:25.007 回答