javascript - 如何在不重新加载 HTML 页面的情况下重定向 anchor 标记链接？

Question

我希望我的 anchor 标记在给定路径上重定向，但不重新加载整个网页。我的 anchor 标记如下所示:

<a href="/test" (click)="goHome()">Click me</a> 

下面是我的组件，我在其中将 HTML 标记作为字符串分配给变量 Htmlsnipet:

@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

htmlSnippet = `<a href="/test">Click me</a>`;
@ViewChild('element') public viewElement: ElementRef;
public element: any;
flag = true

下面是我希望将 HTML 呈现为 innerHTML 的模板

<div>
<span #element [innerHTML] = "htmlSnippet | safe: 'html'"></span>
</div>

一切正常，但当我点击“点击我”时，它正在重新加载应用程序。

Answer 1

看来您正在使用 Angular。您可以使用路由器并导航到您想要的任何地方。

在您的组件中添加以下代码。确保您已定义回家路线(例如 home)

// import Router
import {Router} from '@angular/router';

// add in constructor
constructor(private router: Router) {

}

// modify your method goHome as:
goHome() {
    this.router.navigate(['/home']);
}