Angular 路由器导航更改 url，但不渲染组件

Question

我正在开发一个带有路由和路径参数的角度应用程序。单击按钮即可调用一个函数，将用户重定向到具有相同路径参数的新 URL。尽管浏览器中的 URL 发生变化，但 app-routing.module.ts 中定义的相应组件并未加载。如果我再次刷新页面，就会呈现正确的页面。

这个想法是，学生获得一个带有哈希标记的唯一 URL（例如

/student/33192c29aa8e449e94f3a1c4eef43ca8

），这向他展示了一些指导原则。然后，点击一下，他应该会被转发到具有相同令牌的注册页面（例如

/student/registration/33192c29aa8e449e94f3a1c4eef43ca8

）

app-routing.module.ts

const routes: Routes = [
  ...
  { path: 'student/registration/:token', component: RegistrationsComponent },
  { path: 'student/:token', component: GuidelinesComponent },
  ...
];

guidelines.component.html

forwardToRegistration(): void {
  this.router.navigateByUrl('/student/registration/' + this.studentToken);
}

URL 在浏览器中正确更新，但 RegistrationComponent 未呈现。

谢谢您的帮助！

Answer 1

我也遇到了同样的问题，并解决了。 也许您看不到内容更改，因为您在 app.component.html 中没有 router-outlet 标记。 url会改变

的内容

<router-outlet></router-outlet>

所以你应该将 router-outlet 标签放置在 app.component.html 中。

Answer 2

@RobLasch 几乎已经拥有了。

简而言之，你想要订阅activatedRoute.params。 您不想订阅整个activatedRoute。

这是一个很棒的视频，可以引导您完成整个过程 https://codecraft.tv/courses/angular/routing/parameterized-routes/

我在操作发布中没有看到组件构造函数，所以这是我的......

这有效并检查控制台，您没有得到任何额外的迭代......它的行为就像您所期望的那样！

组件构造函数...

  constructor( 
              private activatedRoute : ActivatedRoute) {
        
                 
                this.activatedRoute.params.subscribe( (data) => {
                     
                    const id = this.activatedRoute.snapshot.paramMap.get('token');
                    console.log('router subscription fired token:' + token);
                    if(null == token) return;
                    this.getDetail();   //do whatever you need to do
                  })
        }

调用Component.ts

  itemClicked(evt: MouseEvent, item_: project) {
           
           
          this.router.navigate(['/students/' + item_.token]);
    } 

Answer 3

我通过监听应该刷新的组件中的路由器更改来解决它。

步骤1。 在 app.component.ts 中：导航到组件（孤立组件）并传递带有变量 tableName 的对象。

this.router.navigate( ['/orphan', {table:tableName} ] );

步骤 2。 在 orphan.component.ts 中，可观察到的下标用于检测路由器更改并从快照对象获取 tableName :

constructor( private route:ActivatedRoute, private router:Router) { 
      /* Listen for router events through the observable */
      router.events.subscribe( (data) => {
        // get the data from the snapshot
        this.tableName = this.route.snapshot.params.table;
      })
}

Orphan 组件现在已使用 tableName 值进行刷新。

Answer 4

呵呵。也许

student/registration

与默认的

pathMatch: 'prefix'

设置相结合，可以使 Angular 路由器将您的

navigateByUrl

解释为相同的路径导航。只是一个假设。

要测试这一点，请将

pathMatch: full

添加到第二条路线：

{
    path: 'student/:token',
    component: GuidelinesComponent,
    pathMatch: 'full',
}

Answer 5

我有同样的问题，但就我而言，这是因为我将通配符路由放在路由配置的顶部......

export const routes: Routes = [
    { path: '**', component: HomePageComponent},
    { path: 'client-list', component: ClientListComponent},
];

通过将通配符放在最后来修复：

export const routes: Routes = [
    { path: 'client-list', component: ClientListComponent},
    { path: '**', component: HomePageComponent},
];