Question

我是角色新手，我正在开发角度4应用程序，并在点击按钮时尝试从模块组件导航到布局组件。但导航不起作用。

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

我花了很多时间在谷歌上解决这个问题，但我无法解决。

下面是代码。

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 { Router ,ActivatedRoute} 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; 
        }
    }

最后是我的app模块

                import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { CommonModule }    from '@angular/common';

        import { FormsModule, FormGroup,FormControl,Validators,FormBuilder,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 {  Component } from '@angular/core';
        import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
        import { FileUploadModule } from 'ng2-file-upload/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。只是想帮忙。

角度路由导航不会重定向到其他组件

1 个答案: