Question

我有一个带有角度2和webpack的项目构建，我希望在这个单一项目中有两个应用程序。

问题是我无法弄清楚如何使用＆＃34; historyApiFallback＆＃34;将不同的网址映射到不同的入口点（HTML网页）。

项目结构如下：

front/
--app.component.ts
--main.ts
--index.html
admin/
--app.component.ts
--main.ts
--index.html

bundle之后的输出结果如下：

/dist
--index.html
--admin.html
--index.app.js
--admin.app.js

只有一个app和historyApiFallback设置为true，我可以拥有＆＃34; / hero / 1＆＃34;，＆＃34; / hero-list＆＃34;或＆＃34; / abc / def / ghi＆＃34;指向index.html。

我应该怎么做才能让一切都以＆＃34; / admin＆＃34;开头。例如：＆＃34; / admin / edit-hero / 1＆＃34;指向admin.html，其他每个url都转到index.html ??

Answer 1

您可以将选项传递给@Component({ selector: '...', templateUrl: '...html', styleUrls: ['...css'] }) export class AppComponent implements OnInit, OnDestroy { private myText: string; private myTextSubscription: Subscription; constructor() { } ngOnInit() { // I assume here that you declared an observable called "someObservable" this.myTextSubscription = someObservable$.subscribe(text => this.myText = text); } ngOnDestroy() { // as our observable is not coming from router or http, we need to manually // unsubscribe in order to avoid memory leaks this.myTextSubscription.unsubscribe(); } }而不是布尔值。

这样的事情可能有所帮助：

@Component({
  selector: '...',
  templateUrl: '...html',
  styleUrls: ['...css']
})
export class AppComponent implements OnInit, OnDestroy {
  private text: string;
  private textSub: Subscription;

  constructor(private store$: Store<State>) {
    this.textSub =
        store$.select('yourState')
            .subscribe((state: State) => this.text = state);
  }

  ngOnDestroy() {
    this.textSub.unsubscribe();
  }
}

默认设置仍会重定向到historyApiFallback。

查看connect-history-api-fallback库，historyApiFallback: { rewrites: [ { from: /^\/admin\/.*$/, to: 'admin.html'} ] }依赖于其historyApiFallback实现。

webpack-dev-server使用historyApiFallback提供多个html页面

1 个答案: