向Angular5应用程序的外部链接重定向到默认路由

Question

我很难理解为什么向我的角度应用程序的外部链接从浏览器重定向到默认路由页面。

该应用程序允许用户输入某人的电子邮件地址，在该地址中触发API，然后通过电子邮件将相关的电子邮件地址发送给"外部"面向应用程序中的页面的链接。此页面没有任何身份验证的背后，因此应允许用户从收到的电子邮件中的链接中访问此页面以完成邀请注册过程。

生成的URL包含一个键，该密钥在访问页面时被检查为有效，以检查用户是否已收到有效的邀请。

我注意到的一件事是，当我尝试访问URL时，我会被重定向到默认路由页面（登录），但是当我再次按Enter时，该应用程序不会重新加载，并且将我带到该页面。第三次输入URL会导致应用程序再次重新加载并重定向到默认路由，第四次工作等等，等等。

这是通过电子邮件发送给新用户的生成的外部链接的示例。

http://degould-login.dev/#/acceptinvite?key=e1061fd2-85de-42b9-89a0-ac8667bd1b84 

这是我的路线文件：

import {RouterModule, Routes} from "@angular/router";
import {HomeComponent} from "./components/home/HomeComponent";
import {LoginComponent} from "./components/login/LoginComponent";
import {SearchVehicleComponent} from "./components/search/SearchVehicleComponent";
// Reports
import {ReportsDashboardComponent} from "./components/reports/ReportsDashboardComponent";
import {ReportExceptionsComponent} from "./components/reports/reportExceptions/ReportExceptionsComponent";
import {IndividualReportExceptionComponent} from "./components/reports/reportExceptions/IndividualReportExceptionsComponent";
import {ClaimReportsComponent} from "./components/reports/claimReports/ClaimReportsComponent";
import {BoothReportComponent} from "./components/reports/boothReports/BoothReportComponent";
import {UserReportComponent} from "./components/reports/userReports/UserReportComponent";
import {VehicleReportsComponent} from "./components/reports/vehicleReports/VehicleReportsComponent";
// Users
import {RegisterComponent} from "./components/users/registerComponent/RegisterComponent";
import {UsersDashboardComponent} from "./components/users/UsersDashboardComponent";
import {EditUserComponent} from "./components/users/editComponent/EditUserComponent";
import {SignupComponent} from "./components/users/signupComponent/SignupComponent";
import {ResetPasswordComponent} from "./components/users/resetPasswordComponent/ResetPassword.component";
// Guards
import {AuthGuard} from "./guards/AuthGuard";
import {SuperUserGuard} from "./guards/SuperUserGuard";
import {PublicGuard} from "./guards/PublicGuard";

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent, pathMatch: 'full' },
    { path: 'acceptinvite', component: SignupComponent, pathMatch: 'full', canActivate: [ PublicGuard ]},
    { path: 'forgottenpassword', component: ResetPasswordComponent, pathMatch: 'full' },
    // User Section
    { path: 'users', component: UsersDashboardComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full'},
    { path: 'users/register-user', component: RegisterComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full' },
    { path: 'users/edit-user/:username', component: EditUserComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full' },
    /*{ path: 'users', component: UsersDashboardComponent, canActivate: [ SuperUserGuard ],
        children: [
            { path: 'register-user', component: RegisterComponent, canActivate: [ SuperUserGuard ] },
            { path: 'edit-user/:user-to-account-id', component: EditUserComponent, canActivate: [ SuperUserGuard ] }
        ]
    },*/
    // Reports
    { path: 'reports', component: ReportsDashboardComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },
    { path: 'reports/report-exceptions', component: ReportExceptionsComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },
    { path: 'reports/report-exceptions/:report-exception-id', component: IndividualReportExceptionComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full'},
    { path: 'reports/booth-reports', component: BoothReportComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },
    { path: 'reports/claim-reports', component: ClaimReportsComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },
    { path: 'reports/user-reports', component: UserReportComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },
    { path: 'reports/vehicle-reports', component: VehicleReportsComponent, canActivate: [AuthGuard, SuperUserGuard], pathMatch: 'full' },

    // Search
    { path: 'search/:search-term', component: SearchVehicleComponent, canActivate: [AuthGuard], pathMatch: 'full' },
    { path: 'search', component: SearchVehicleComponent, canActivate: [AuthGuard], pathMatch: 'full' },
    { path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full' },
    // otherwise redirect to home
    { path: '**', redirectTo: '', pathMatch: 'full' }
];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true, enableTracing: true });

应该称为的组件（我只是显示相关代码）：

@Component({
    moduleId: module.id,
    selector: 'signup',
    templateUrl: '/app/views/users/signup.component.html'
})
export class SignupComponent implements OnInit {
    @ViewChild('f') formDOM: any;
    @ViewChild(ShowHideInputDirective) input: ShowHideInputDirective;
    private key: string;
    private formDefaults: Object = {
        userGroups: [],
        accounts: []
    };
    private model: Object = {
        Name: '',
        Username: '',
        Email: '',
        Password: '',
        UserGroup: null,
        Account: null
    };
    loading:boolean = false;
    error = '';
    private showPass = false;
    constructor(
        private _activatedRoute: ActivatedRoute,
        private _alertService: AlertService,
        private _router: Router,
        private _userService: UserService,
        private _authService: AuthenticationService,
        private _accountService: AccountService
    ) {
        this.key = _router.parseUrl(_router.url).queryParams["key"];
    }
    ngOnInit() {
        if(this._authService.isLogged()) {
            this._router.navigate(['/']);
        }
        this._userService.validateInviteKey(this.key)
            .subscribe((response) =>

和被加载的组件：

@Component({
    moduleId: module.id,
    templateUrl: '/app/views/login/login.component.html'
})
export class LoginComponent implements OnInit {
    private model: any = {
        email: '',
        password: ''
    };
    private loading = false;
    private error = '';
    private resetPasswordUsername;
    private resetPasswordLoading: boolean = false;
    constructor(
        private _router: Router,
        private _authenticationService: AuthenticationService,
        private _alertService: AlertService,
        private _userService: UserService
    ) {
    }
    ngOnInit() {
        if(this._authenticationService.isLogged()) {
            this._router.navigate(['/']);
        }
        // reset login status
        //this._authenticationService.logout();
    }

我的问题为什么在尝试通过URL访问我的应用程序页面时，如上图所示，当应用程序完成加载后，我会重定向到登录（默认）页面吗？可以做我正在做的事情吗？

谢谢

Answer 1

我正面临相同的问题，并通过设置：

initialNavigation: 'enabled'

在我的胭脂中，我解决了它。希望它有帮助。

https://angular.io/api/router/extraoptions#initialnavigation