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

Posted 2023-03-05

【中文标题】如何在不重新加载 HTML 页面的情况下重定向锚标记链接？

【英文标题】：how to redirect anchor tag link without reloading the HTML page?

【发布时间】：2019-01-20 21:45:45

【问题描述】：

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

<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>

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

【问题讨论】：

“点我”上没有链接

请更描述性以解决问题。

@Progressive 添加了该代码

你在使用 Angular 吗？

如果你想重定向 goHome() 函数点击然后使用 href = "javascript:void(0)"

【参考方案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']);

【讨论】：

感谢您的帮助，但事实并非如此。 goHome 函数位于带有 angular 的 innerHTML 中。

@NileemaGaykwad，如果你使用 window.location.href("/test") 你是说重新加载页面。您可以尝试使用 hastlocation 策略angular.io/guide/…

【参考方案2】：

因为您使用的是href="/test"，所以浏览器会识别它并触发页面加载行为尝试远程从目标路径获取内容，这显然不是您所期望的。

相反，您应该删除 href="/test" 并使用 routerLink="/test"，此属性提供正确的 Angular 路由。

还有一件事，我看到你也为这个链接标签定义了一个(click)="goHome()"，这与你试图为这个链接指定路由路径所做的事情令人困惑和冲突。

尽管您可以随心所欲地同时拥有两者，但我建议您保留 (click)="goHome()" 或 routerLink="/test"。

如果您想做一些额外的事情，请使用 goHome() 方法并按照 Anshuman 的建议手动导航到主屏幕。否则只需定义路由并使用routerLink="/test"。

【参考方案3】：

在你调用的元素上使用指令 [innerHtml]

constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) 
  ngOnInit(): void 
    setTimeout(() => 
      // wait for DOM rendering
      this.reinsertScripts();
      this.reinsertLinks();
    );
  
  reinsertLinks(): void 
    const links = <HTMLAnchorElement[]>this.elementRef.nativeElement.getElementsByTagName('a');

    if (links) 
      const linksInitialLength = links.length;
      for (let i = 0; i < linksInitialLength; i++) 
        const link = links[i];

        if (link.host === window.location.host) 
          this.renderer.listen(link, 'click', event => 
            event.preventDefault();
            this.router.navigate([
              link.href
                .replace(link.host, '')
                .replace(link.protocol, '')
                .replace('//', '')
            ]);
          );