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

Question

我希望我的锚点标签在不重新加载整个网页的情况下重定向到给定路径。我的锚点标签如下所示：

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

所有功能都正常，但当我点击“点击我”时，它会重新加载应用程序。

- Nileema Gaykwad

---

"Click me" 没有链接。 - undefined

请更详细地描述以解决问题。 - undefined

你在做Angular吗？ - undefined

如果你想在点击goHome()函数后进行重定向，那么请使用href = "javascript:void(0)"。 - undefined

@7urkm3n 我想从一个 Angular 4 组件导航到一个新的 HTML 页面。我可以使用 href 来实现，但这会重新加载整个 Angular 应用程序，而我并不希望这样。 - undefined

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']);
}

- Anshuman Jaiswal

---

谢谢帮忙，但这不是情况。goHome函数在使用Angular的innerHTML中。 - undefined

@NileemaGaykwad，如果你使用window.location.href("/test")，那就是在要求重新加载页面。你可以尝试使用hastlocation策略https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles - undefined

Answer 2

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

相反，你应该删除href="/test"并使用routerLink="/test"，这个属性可以提供正确的Angular路由。

还有一件事，我看到你也为这个链接标签定义了一个(click)="goHome()"，这很令人困惑，并与你尝试指定此链接的路由路径产生冲突。

尽管你可以随意选择两者，但我建议保留(click)="goHome()"或routerLink="/test"中的一个。

如果你想做额外的事情，请使用goHome()方法并手动导航到主屏幕，就像Anshuman建议的那样。否则，只需定义路由并使用routerLink="/test"即可。

- Xinan

Answer 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('//', '')
            ]);
          });
        }
      }
    }
  }

- Chad