在Angular4

Question

我正在与Angular 4建立一个网站。除了有几个＆＃34;复杂＆＃34;组件，我需要显示一些基本的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：所有基本页面的一个组件

拥有一个＆＃34;页面＆＃34;通过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)而抱怨它。虽然链接文档有一个关于信任某些来源的部分，但我觉得，这不是一个好方法。

问题

是否有其他方式可以显示＆＃34;静态HTML内容＆＃34;？理想情况下，我希望只需路由到特定模板，而无需指定任何组件或重复使用单个组件用于所有基本页面。与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

我想我有类似的＆＃39;要求：我需要在不使用组件（和路由）的情况下打开包含静态html的页面;我创建了html文件/模板，将其放在＆＃39; assets＆＃39; （由angular-cli.json设置允许）。 我有和事件处理程序打开一个新页面如下：

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

备注：没有路由，静态页面html是一个完全独立的＆＃39;！DOCTYPE html＆＃39;，它没有嵌套在路由器插座内。 希望这可以增加您的问题的洞察力。