動態 Angular 路由和外部內容源

Question

我有一個關於如何最好地解決問題的模式或設計問題； 我會簡化我的想法，所以我不會混淆問題：

我有一個簡單的兩個組件，兩個垂直列的 Angular 應用程序，如下所示：

<div class="container-fluid">
  <div class="row">
      <div class="col-3">
            <app-sidemenu></app-sidemenu>
      </div>
      <div class="col-9">
            <app-content></app-content>
            <router-outlet></router-outlet>
      </div>
    <div class="col"></div>
  </div>
</div>

為了擴展的目的，整個系統需要是動態的，因此就內容而言，沒有什么是靜態的。

例如：側邊菜單中的鏈接是從存儲在 GitHub 上的外部托管 .html 文件列表動態生成的，用於版本控制。

正如你在下面看到的，我只有一條從側邊菜單元素到內容組件的路由：

const routes: Routes = [
  {path: 'page:/id', component: ContentComponent}
];

以下是我需要幫助的內容：

設想：

我在 GitHub 上有 10 個外部托管的 .html 文件。 我需要將每個菜單鏈接路由到每個 .html 文件，並在單擊每個菜單項時在內容組件中顯示每個文件的內容。

更簡單地描述：每個菜單項將內容從外部托管的 .html 文件加載到內容組件中。

我已經閱讀了許多不同的選項，這些選項僅部分描述了我嘗試做的事情，所以我真的想知道這是否可行（當我描述它時似乎很容易），如果是，我將從哪里開始。

我不是在尋找快速的代碼解決方案，而是在尋找正確方向的一個點，所以我可以自己解決這個問題，並驗證如果有更好的方法，我不會浪費時間。

Answer 1

如果我理解正確，您需要通過角度路由重定向外部網頁/應用程序。 如果這是您的問題，則沒有“正確”的解決方案。 這是因為 angular 中的路由不能用外部鏈接替換。 您可以創建一個像這樣調用外部 Url 的方法。

<a href="https://angular.io">Go to Angular website</a>

但這不是您的解決方案。

你可以做的是一個奇怪的解決方案，你需要為 N 個外部鏈接路由 N 個組件。 然后在每個OnInit()方法中使用這個：

window.location.replace("WebPage_Url")

不要使用HREF因為在 chrome 中不起作用。

每條路線應該是這樣的：

    const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'Link1',
    component: Link1Component
  },
  {
    path: 'Link2',
    component: Link2Component
  }

現在，如果您轉到localhost://xxxx/link1，這將被重定向到您的網頁。

希望這將是有用的。