Angular 路由器导航问题

Question

我无法理解 Angular 路由器的工作原理。

这是我的问题：我目前在这个 url/route -

https://localhost:4200/#/db/accounts/resetpassword?userId=7&resetToken=xyz

当我使用 Router + ActivatedRoute 导航时

this._router.navigate(['login'], { relativeTo: this._actRoute })
this._router.navigate(['./login'], { relativeTo: this._actRoute })
this._router.navigate(['../login'], { relativeTo: this._actRoute })
this._router.navigate(['../../login'], { relativeTo: this._actRoute })

...我被发送到

https://localhost:4200/#/db/accounts/resetpassword/login

当我导航到

this._router.navigate(['../../../login'], { relativeTo: this._actRoute })

...我被发送到

https://localhost:4200/#/db/accounts/login

...这是我要发送到的地方。

我的问题是，为什么最后一个替换了 url 的结束段而前 4 个没有。我觉得我缺少路由工作原理的一些基本部分。

Answer 1

对于任何感兴趣的人，这就是我现在解决它的方式。我不太相信

this._router.navigate(['../../../login'], { relativeTo: this._actRoute })

因为在不同的模块中这行得通

this._router.navigate(['../../login'], { relativeTo: this._actRoute })

如果有人知道更好的方法请评论。此外，这可能需要对片段等进行一些额外检查。

        import { Router } from '@angular/router';

    //-------------------------------------------------//

    /**
     * Replaces everything after the last '/' in currentUrl with replacementSegment.    
     * Will also remove any paramaters. 
     * @param currentUrl url to change
     * @param replacementSegment what to put at the end of the altered url
     * @returns the altered url
     */
    export function ReplaceLastUrlSegment(currentUrl: string, replacementSegment: string): string {

        if (!currentUrl)
            return '/' + replacementSegment

        //remove any paramaters
        const segments = currentUrl.split('?')
        if (!segments?.length)
            return '/' + replacementSegment

        return segments[0].split('/').slice(0, -1).join('/') + '/' + replacementSegment


    }//ReplaceLastUrlSegment

    //-------------------------------------------------//

    /**
     * Replaces everything after the last '/' in router.url with replacementSegment.    
     * Will also remove any paramaters. 
     * @param router current router
     * @param replacementSegment what to put at the end of the altered url
     * @returns the router's altered url
     */
    export function ReplaceLastUrlSegmentFromRouter(router: Router, replacementSegment: string): string {


        //Don't null check it.
        //It should crash if router is null
        return ReplaceLastUrlSegment(router.url, replacementSegment)

    }//ReplaceLastUrlSegmentFromRouter

    //-------------------------------------------------//

    /**
     * Replaces everything after the last '/' in router.url with replacementSegment.  Then navigates to new url.
     * Will also remove any paramaters. 
     * @param router current router
     * @param replacementSegment what to put at the end of the altered url
     */
    export function ReplaceLastUrlSegmentAndNavigate(router: Router, replacementSegment: string) {

        //Don't null check it.
        //It should crash if router is null

        const newUrl = ReplaceLastUrlSegment(router?.url, replacementSegment)
        router.navigateByUrl(newUrl)


    }//ReplaceLastUrlSegmentFromRouter

    //-------------------------------------------------//

Angular 路由器导航问题

Angular router navigation problems

angular

angular-router