innerHTML中的Angular 2特定代码

时间:2016-09-20 09:30:55

标签: angular angular2-routing angular2-template

我正在一个较旧的系统上构建一个Angular 2移动网站,我从该系统通过Web服务提供html。

在提供的html中,有一些链接会转到我的新应用中的角度页面。我目前正在使用<div [innerHTML]="serverDoc"></div>来呈现html。

甚至可以在我的服务器端html中添加(click)="goToPageX()",然后让它在我的类型脚本类中调用一个函数,这样我就可以通过angular 2路由器将用户路由到正确的页面了?

是否需要这样做?即使不通过角度2路由器,到右侧URL的简单链接是否会保持导航历史记录完好无损?

1 个答案:

答案 0 :(得分:-1)

如果要使用路由器,可以将routerLink指令添加到按钮或链接中。您需要事先设置路线。

<button routerLink="/link/toPage">Go to page</button>

如果要以编程方式路由,可以使用路由器的导航功能。

import { Router } from @angular/router

@Component({
  selector: 'my-app',
  template: '<button (click)="goToPage()">Go to page</button>'
})
export class AppComponent { 
    constructor(private _router: Router){ }

    goToPage(){
        this._router.navigate("/link/toPage");
    }
}

在angular2的router documentation了解详情。

--------------编辑--------------

如果您想使用按钮转到某个链接,可以使用window.location.href在javascript中进行操作。这也适用于链接到角度位置,如果你在它之外就开始了。

<html>
    <head>
        <script>
            function goToPage(){
                window.location.href = "http://www.google.com";
            }
        </script>
    </head>
    <body>
        <button onclick="goToPage()">google</button>
    </body>
</html>