Question

我正在尝试动态更改Angular 4应用的网址，但我仍然保持以下错误 -

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null

使用以下代码 - this.router.navigateByUrl('/' + button.slug);或this.router.navigate(['/' + button.slug]);

我想对所有路线只使用一个组件app.component.ts。

app.module.ts中的

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ZoneAreaComponent } from './zone-area/zone-area.component';
import { ZoneTransitionComponent } from './zone-transition/zone-transition.component';
import { DataProviderService } from './data-provider.service';
import { NavComponent } from './nav/nav.component';
import { NavButtonComponent } from './nav-button/nav-button.component'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {ResponsiveConfig, ResponsiveModule} from 'ng2-responsive';
import { RouterModule, Routes } from '@angular/router';
let config = {
  breakPoints: {
    xs: {max: 600},
    sm: {min: 601, max: 769},
    md: {min: 770, max: 1279},
    lg: {min: 1280, max: 1919},
    xl: {min: 1920}
  },
  debounceTime: 100 // allow to debounce checking timer
};

const appRoutes: Routes = [
  { path: '**', component: AppComponent }
];

export function ResponsiveDefinition(){
  return new ResponsiveConfig(config);
};
@NgModule({
  declarations: [
    AppComponent,
    ZoneAreaComponent,
    ZoneTransitionComponent,
    NavComponent,
    NavButtonComponent,

  ],
  imports: [
    BrowserModule,
    HttpModule,
    NgbModule.forRoot(),
    ResponsiveModule,
    RouterModule.forRoot(appRoutes)

  ],
  providers: [DataProviderService, {
    provide: ResponsiveConfig,
    useFactory: ResponsiveDefinition }],
  bootstrap: [AppComponent]
})
export class AppModule { }

this.location.go(butData.slug)工作正常，但我似乎无法检测到更改

this.location.subscribe((value) => {
      console.log("Location changed");
    });

有效吗

Angular 2/4 - 更改URL

0 个答案: