可以将 Angular 路由器配置为在单击具有本地 href 的锚点时更新 Angular 路由吗？

Question

我正在将 angularjs 应用程序转换为 Angular 9 应用程序。我们的代码的一部分是一个内容管理系统，它加载在其他地方编写和存储的 HTML。此 HTML 包含指向应用程序内视图的锚点，我希望它们就地打开并保持当前应用程序状态。这似乎不是 Angular 9 的默认设置。

例如，如果我有一个如下所示的链接：

<a href="/home">Home</a>

嵌入在 HTML 中。单击该链接时，我希望应用程序将顶级页面更改为由角度路线

/home

定义的页面。这似乎是 anguarjs 的默认设置，但是当我在 Angular 中单击该链接时，它会更改整个 URL，并且似乎会刷新页面。这导致我丢失其他页面状态。

有没有办法让这个外部加载的 HTML 中的所有锚点都使用 Angular 路由器而不是浏览器位置？我无法更改锚标记以使用

routerLink

，这将是最好的解决方案。

Answer 1

将加载的 CMS HTML 插入页面后，您可以在所有

click

标记上安装

<a>

侦听器，并以编程方式执行路由器导航。

示例

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

    constructor(private router: Router, private elRef: ElementRef) {
    }

    ngOnInit(): void {

        // Load CMS HTML
        const myHTML = '<a href="/home">Home</a>';

        // Insert HTML into this component's element
        const el = <HTMLElement> this.elRef.nativeElement;
        el.insertAdjacentHTML('afterbegin', myHTML);

        // Install a click listener on all 'a' elements
        el.querySelectorAll('a').forEach(a => {
            a.addEventListener('click', e => {

                // Prevent the browser from performing any further actions
                e.stopPropagation();
                e.preventDefault();

                // Parse the URL and extract the path
                const url = new URL(a.href);

                // Navigate to the Angular route
                this.router.navigate([ url.pathname ]);
            });
        });
    }
}