Question

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

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

全局基本网址（base href = ..）已由TYPO3设置，无法更改。如何给角度赋予某种根前缀，以便它可以正确地构建路径？

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

Answer 1

实际上，角度文档中有一个解决方案，但很难找到。可以在不使用<base>标记的情况下将基本网址设置为有角度因此，您只需使用流体将基本URL设置为全局JavaScript变量，然后在应用程序模块中将其设置为角度。

<强>流体

<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

Answer 2

原因是您的网络服务器已经处理了URL，因此它没有被委托给Angular2路由。要解决此问题，您必须在Angular中使用不同的import {Component, Input, ApplicationRef} from '@angular/core'; import {AppService} from './appservice'; @Component({ selector: 'my-component', template: ` <div> This is my component! </div> `, }) export class MyComponent { constructor(private appSvc: AppService) { } ngOnInit(): void { this.appSvc.setVisible(true); console.log('MyComponent - ngOnInit'); } ngAfterViewInit() { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > 10000){ break; } } //setTimeout(() => { this.appSvc.setVisible(false)}); this.appSvc.setVisible(false); console.log('MyComponent - ngAfterViewInit'); } }。

您正在寻找的内容称为VM437 AppService - setVisible - true VM439 mycomponent.ts!transpiled:33 MyComponent - ngOnInit VM439 mycomponent.ts!transpiled:37 MyComponent - ngAfterViewInit -begin VM439 mycomponent.ts!transpiled:47 MyComponent - ngAfterViewInit -end **VM440 spinner.ts!transpiled:38 status: currentValue = true, previousValue = fals** VM437 appservice.ts!transpiled:27 AppService - setVisible - false VM439 mycomponent.ts!transpiled:45 Observable Complete **VM440 spinner.ts!transpiled:38 status: currentValue = false, previousValue = true**，以创建LocationStrategy之类的路由，其中HashLocationStrategy从网络服务器提供，/page1/app/#/angular-controller/是第一个参数到你的Angular2应用程序逻辑。

调整您的模块声明（例如/page1/app/）

/angular-controller/

在Angular2 documentation中查找有关该内容的更多详细信息（示例也是从那里获取的）。

Answer 3

我建议不要使用baseURL配置属性。这有点过时，导致一些问题，比如你的。

您可以设置

config.absRefPrefix = /

所有链接都将在/ now之前添加，也可以使用。

Answer 4

在角度的最新版本中，我收到有关变量的错误，因此我使用数据属性

<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 {}

Answer 5

在这种情况下看看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 doc上的这些页面：

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

Angular2如何独立于html base url设置应用程序根路径

5 个答案: