Angular 路由导航未重定向到其他组件

Question

我是 angular 的新手，我正在开发 angular 4 应用程序，并尝试在单击按钮时从模块组件导航到布局组件。但导航不工作。

而且我没有看到任何错误消息。

我花了很多时间 google 来解决这个问题，但我无法解决。

下面是代码。

html:

      <div class="land-item" (click)="qualityrd()">      
      <h3>QAULITY</h3>
      <i class="fa fa-thumbs-o-up"  style="color:blue"></i>
      <div class="over-item">

分量：

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

@Component({
    selector: 'app-module-selector',
    templateUrl: './module-selector.component.html',
    styleUrls: ['../css/style.css', '../css/responsive.css']
})
export class ModuleSelectorComponent {

    constructor(
        private _router: Router, private route: ActivatedRoute) {
    }
    
    qualityrd(): void {
        this._router.navigate(['/QualityLayout']);
    }
}

布局组件

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

@Component({
    selector: 'my-app',
    templateUrl: './Layout.html',
    styleUrls: ['../css/footer.css']
})
export class LayoutComponent {
    isIn = false;   // store state
    toggleState() { // click handler
        let bool = this.isIn;
        this.isIn = bool === false ? true : false;
    }
}

最后是我的应用程序模块：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {RouterModule, Routes} from '@angular/router';
import {LayoutComponent} from './Layout/Layout.Component';
import {ExcelDownloadComponent} from './ExcelDownload/ExcelDownload.Component';
import {ExcelUploadComponent} from './ExcelUpload/ExcelUpload.Component';
import {SpotCheckStatusComponent} from './spotCheck/spotcheckstatus.component';
import {PageNotFoundComponent} from './others/PageNotFoundComponent';
import {FileDropDirective, FileSelectDirective} from 'ng2-file-upload';
import {ModuleSelectorComponent} from './module-selector/module-selector.component';

const appRoutes: Routes = [
    {path: 'SPOTCHECK', component: SpotCheckStatusComponent},
    {path: 'ExcelDownalod', component: ExcelDownloadComponent},
    {path: 'ExcelUpload', component: ExcelUploadComponent},
    {path: 'ModuleSelector', component: ModuleSelectorComponent},
    {path: 'QualityLayout', component: LayoutComponent},
    {path: '', redirectTo: '/ModuleSelector', pathMatch: 'full'},
    {path: '**', component: PageNotFoundComponent}
];

@NgModule({
    declarations: [AppComponent, SpotCheckStatusComponent, PageNotFoundComponent,
        LayoutComponent, ExcelDownloadComponent, ExcelUploadComponent,
        ExcelDownloadComponent, FileDropDirective, FileSelectDirective, ModuleSelectorComponent],
    imports: [BrowserModule, FormsModule, HttpModule, ReactiveFormsModule,
        RouterModule.forRoot(appRoutes)],
    providers: [],
    bootstrap: [ModuleSelectorComponent]
})
export class AppModule {
}

Answer 1

下面是我的 app.module 的部分代码，它有效。

providers: [CategoryService, SubCategoryService, FeaturedBrandService, 
  {provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]  ** instead of Module Selector component
})
export class AppModule { }

您的代码应该适用于此更改。否则，您可能必须分解您的代码（注释您的一些代码），直到它可以路由到 QualityLayout。只是想帮忙。

Angular 路由导航未重定向到其他组件

Angular route navigation not redirecting to other component

angular

angular-router