在Angular4中路由到基本HTML页面

Question

我正在使用Angular 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-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 文件/模板，将其放置在“资产”中（由 angular-cli.json 设置允许）。我有一个打开新页面的事件处理程序，如下所示：

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

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