angularjs - 路由到 Angular4 中的基本 HTML 页面

Question

我正在使用 Angular 4 构建一个网站。除了有几个“复杂”组件外，我还需要显示一些基本的 HTML 页面:

• 开始(着陆页)
• 使用条款
• 印记
• ...

我希望路由器以某种方式进行路由，以便将这些页面的 HTML 内容放置在 <router-outlet></router-outlet> 的位置。 - 就像普通组件一样。

备注:目前，这些页面不使用任何动态特性，例如绑定(bind)；它们只是基本的 HTML。稍后我可能想利用插值来在一个地方定义小文本片段(电话号码)。此外，在某些时候，网站需要提供不止一种语言。然而，就目前而言，专注于显示基本 HTML 就足够了。

到目前为止，我找到了两种方法:

方法 1:每页一个组件

每一页都有一个组件。因此，我最终得到 terms-of-use.component.ts , terms-of-use.component.html , imprint.component.ts , imprint.component.html等等)。

路由器定义

路由器定义如下:

const routes: Routes = [
    { path: 'start', component: StartComponent },
    { path: 'terms-of-use', component: TermsOfUseComponent },
    { path: 'imprint', component: ImprintComponent },
    ...
]

缺点

每个页面都有一个组件意味着很多组件声明。根据页面数量，这很快就会变得一团糟。

方法一:所有基本页面一个组件

有一个单独的“页面”组件，通过 http 加载相应站点的 HTML 内容-要求。我用 data - 路由对象中的属性告诉组件加载哪个页面。该组件的模板使用 <div [innerHtml]="pageTemplate"> </div>显示加载的页面内容；其中 pageTemplate保存加载的 HTML。

路由器定义

路由器定义如下:

const routes: Routes = [
    { path: 'start', component: PageComponent, data: { page: "start" } },
    { path: 'terms-of-use', component: PageComponent, data: { page: "terms-of-use" } },
    { path: 'imprint', component: PageComponent, data: { page: "imprint" } },
    ...
]

缺点

通过 http 动态加载的页面显示，但 Angular4 提示它由于 security reasons : WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss) .虽然链接文档中有一节是关于信任某些来源的，但我觉得这不是一个好方法。

问题

是否有另一种显示“静态 html 内容”的方法？理想情况下，我希望只路由到一个特定的模板，而不必指定任何组件或为所有基本页面重用一个组件。类似于 AngularJS 1.x 和 ui-router 的可能性.

AngularJS 1.x 中的路由

在 AngularJS 1.x 中，我使用 ui-router 以这种方式解决我的问题:

var states = [{
        name: 'start',
        url: '/',
        templateUrl: 'src/pages/start.html'
    }, {
        name: 'terms-of-use',
        url: '/terms-of-use',
        templateUrl: 'src/pages/terms-of-use.html'
    }, {
        name: 'imprint',
        url: '/imprint',
        templateUrl: 'src/pages/imprint.html'
    },

Answer 1

我想我有一个“类似”的需求:我需要在不使用组件(和路由)的情况下打开一个包含静态 html 的页面；我创建了 html 文件/模板，将它放在“ Assets ”中(由 angular-cli.json 设置允许)。 我有一个打开新页面的事件处理程序，如下所示:

window.open('../../../assets/myStaticPage.html', '_blank'); 

备注:没有路由，静态页面html是一个完全独立的'!DOCTYPE html'，没有嵌套在router-outlet里面。 希望这可以增加对您的问题的洞察力。