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文件的内容加载到内容组件中。

我已经阅读了许多不同的选项，这些选项仅部分地描述了Im试图做的事情，因此，我真的很想知道这是否可行（描述起来似乎很容易），如果可以的话，我将从哪里开始。

我不是在寻找快速的代码解决方案，而是真正朝着正确的方向发展，因此我可以自己解决这个问题，并确认如果有更好的方法，我不会浪费时间。

Answer 1

如果我理解正确，则需要通过角度路由重定向外部网页/应用程序。如果这是您的问题，那么没有“正确”的解决方案。这是因为不能用外部链接来替换有角度的路由。您可以创建一个这样的方法来调用外部网址。

<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 ，它将被重定向到您的网页。

希望这会很有用。

动态角度路线和外部内容源

1 个答案: