Angular，无法重定向到另一个 web 页面

Question

首先非常感谢您抽出宝贵时间阅读本咨询。 我是 angular 开发的新手，我发现了解这项技术并且不使用我已经使用了一段时间的框架很有趣。 目前我正在开发一个非常简单的 web 应用程序，我遇到的问题是，当我单击“登录”链接时，绝对没有任何反应。 它也没有向我显示错误消息。 我复制了我目前拥有的代码。 如果你能帮助我解决这个问题，我会感谢你。

app.component.html

<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#">Inicio</a>
            </li>
            ....
            <li class="nav-item">
                <!-- <a class="nav-link" [routerLink]="['/login']">Iniciar Sesión</a> -->
                <a class="nav-link" routerLink="/login">Iniciar Sesión</a>
            </li>
        </ul>
    </div>
</nav>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// used to create fake backend
import { fakeBackendProvider } from './_helpers';

import { appRoutingModule } from './app.routing';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AlertComponent } from './_components';

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        appRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        AboutComponent,
        TeamComponent,
        ServiceProvidedComponent,
        ContactComponent,
        RegisterComponent,
        AlertComponent
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

        // provider used to create fake backend
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { };

app.components.ts

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

import { AuthenticationService } from './_services';

@Component({
          selector: 'app-root',
          templateUrl: 'app.component.html',
          styleUrls: ['./app.component.css']
 })
export class AppComponent {
    currentUser: any;

    constructor(private router: Router, private authenticationService: AuthenticationService) {
        this.router.errorHandler = (error: any) => {
          this.router.navigate(['404']); // or redirect to default route
          };
        this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
    }

    logout() {
        this.authenticationService.logout();
        this.router.navigate(['/login']);
    }
}

app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AuthGuard } from './_helpers';

const routes: Routes = [
    // { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },

    // otherwise redirect to home

    // { path: '**', redirectTo: '' }
];

export const appRoutingModule = RouterModule.forRoot(routes);

Answer 1

您需要<router-outlet></router-outlet>来显示渲染的视图。 所以你的代码应该是

<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#">Inicio</a>
            </li>
            ....
            <li class="nav-item">
                <!-- <a class="nav-link" [routerLink]="['/login']">Iniciar Sesión</a> -->
                <a class="nav-link" routerLink="/login">Iniciar Sesión</a>
            </li>
        </ul>
    </div>
</nav>
<router-outlet></router-outlet>