问在Angular4中路由到基本HTML页面

EN

我正在构建一个带有角4的网站。除了有几个“复杂的”组件，我需要显示一些基本的HTML页面：

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

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

备注:目前，这些页面不使用任何动态特性，例如绑定；它们只是基本的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 },
    ...
]

下坡

每个页面都有一个组件，意味着大量的组件声明。这取决于页面的数量，很快就会变得一团糟。

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

具有一个“页面”组件，该组件通过http-request加载各个站点的HTML内容。我在路由对象中使用data-property来告诉组件要加载哪个页面。组件的模板使用<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会因为安全原因：WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss)而抱怨它。虽然链接文档中有一个关于信任某些来源的部分，但我有这样的感觉，这不是一个好方法。

问题

还有其他方法来显示“静态html内容”吗？理想情况下，我希望只需路由到特定的模板，而不必指定任何组件，也不需要为所有基本页面重用单个组件。类似于使用AngularJS 1.x和ui路由器时可能出现的情况。

AngularJS 1.x中的路由选择

在AngularJS 1.x中，我使用ui路由器以这种方式解决我的问题：

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'
    },