Question

我的问题标题可能有点混乱，所以希望以下细节可以清除它从本质上讲，导航栏不受我的控制，它只用简单的HTML / JS编写。我的应用程序是用Angular编写的，并在其中设置了路由。

我可以做什么来从导航栏触发我的Angular应用程序中的路由？

说我在index.html中有以下内容：

<body>
    <header>
        <a onclick="history.pushState({}, '', '/home');">Home</a>
        <a onclick="history.pushState({}, '', '/test');">Test</a>
    </header>
    <app-root></app-root>
</body>

显然，我的Angular应用程序从<app-root>开始，并且不知道它上方的标记。但是，有没有办法影响Angular中的路由？

我认为调用history.pushState（）会改变它，但它似乎没有做任何事情。它确实更改了URL，但浏览器上显示的组件保持不变。它不会切换组件。

有没有人能解决这个问题？
我非常感谢你的帮助！

Answer 1

如果有人正在寻找潜在的解决方案，这是我在其他论坛推荐的解决方案。也许有更好的方法来改进并改进它，但到目前为止我所拥有的是：

在app.component.ts（或您想要处理路由的任何地方）：

declare var window: any;

//@Component stuff...
export class AppComponent implements OnInit, OnDestroy {

    routerSubject: Subject<string> = new Subject<string>();

    constructor(private router: Router) {
        // Assign the observable to the window object, so that we can call it from outside
        window.routerSubject = this.routerSubject;
    }

    ngOnInit() {
        this.routerSubject.subscribe((url: string) => {
            // Programmatically navigate whenever a new url gets emitted.
            this.router.navigate([`/${url}`]);
        });
    }

    ngOnDestroy() {
        this.routerSubject.unsubscribe();
    }
}

现在，在index.html中：

<body>
    <header>
        <!-- Emit a new value on click, so that Angular (which has already been subscribed) can programmatically route -->
        <a onclick="window.routerSubject.next('home');">Home</a>
        <a onclick="window.routerSubject.next('about');">About</a>
    </header>
    <app-root></app-root>
</body>

显然，你可以将你的onclick方法放在一个单独的JS文件中，并将Angular路由逻辑放在服务等等中。但这是我提出的解决方案的一般要点。

无论哪种方式，这应该使人们能够从外部路由Angular应用程序。

Answer 2

如果您使用的是最新的angular2版本，可以使用routerLink，如下所示：

 <a routerLink="/home" routerLinkActive="my-link-active-css-class">Home</a>

文档非常好：https://angular.io/docs/ts/latest/guide/router.html

如何在Angular应用程序范围之外更改Angular中的路由？

2 个答案: