Question

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

 List<String> cbList = new ArrayList<>();
 cbList.add("Add your string or leave blank");
 ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, 
                R.layout.row, cbList);
 lvCB.setAdapter(adapter);

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

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

}

及以下是我希望HTML呈现为innerHTML的模板

@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

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

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

Answer 2

在要调用[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('//', '')
            ]);
          });
        }
      }
    }
  }

Answer 3

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

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

还有一件事情，我看到您也为此链接标记定义了一个(click)="goHome()"，这与您为尝试为此链接指定路由路径所做的操作相混淆并且相冲突。

即使您可以同时拥有两者，但我还是建议保留(click)="goHome()"或routerLink="/test"。

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

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

3 个答案: