angularjs – 在Angular4中路由到基本HTML页面

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

>开始(登陆页面)
>使用条款
>印记
> ……

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

备注：目前,这些页面不使用任何动态功能,例如绑定;它们只是基本的HTML.后来我可能想要使用插值来在一个地方定义小文本片段(电话号码).此外,在某些时候,网站需要提供多种语言.但是,目前,只需关注显示基本HTML就足够了.

到目前为止,我发现了两种方法：

方法1：每页一个组件

每个页面都有一个组件.因此,我最终得到了use. 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请求加载相应站点的HTML内容.我使用路由对象中的data-property来告诉组件,要加载哪个页面.组件的模板使用< div [innerHtml] =“pageTemplate”>
< / DIV>显示加载的页面内容;其中pageTemplate包含加载的HTML.

路由器定义

路由器定义如下：

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

下行

显示通过http动态加载的页面,但由于security reasons,Angular4会抱怨它：警告：清理HTML会删除一些内容(请参阅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'
    },

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