Angular应用会在点击一条路由后停止路由

Question

我是Angular的新手，正在使用Router模块。下面我有一个服务器组件，其中有3个服务器，当我点击每个服务器，它打开服务器的单独组件(服务器组件)显示在同一页面。当我点击任何服务器的服务器组件为该服务器显示在旁边，但它只适用于3台服务器中的1台。在服务器被点击后，服务器的单独页面显示在旁边，但是当我们点击其余的服务器时，相同的操作不会为它们重复。请让我知道为什么会发生这种情况。下面依次是app.module.TS、servers.component.TS、server.component.TS和server.component.HTMl。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ServersComponent } from './servers/servers.component';
import { UserComponent } from './users/user/user.component';
import { EditServerComponent } from './servers/edit-server/edit-server.component';
import { ServerComponent } from './servers/server/server.component';
import { ServersService } from './servers/servers.service';
import { RouterModule } from '@angular/router';
const appRoutes =[
{path:"users",component:UsersComponent,
children:[
{path:":id/:name", component:UserComponent},
]},
{path:"",component:HomeComponent},
{path:"servers", component:ServersComponent, children:[
{path:":id" , component:ServerComponent},
{path:":id/edit", component:EditServerComponent},
]
}
]
@NgModule({
declarations: [
AppComponent,
HomeComponent,
UsersComponent,
ServersComponent,
UserComponent,
EditServerComponent,
ServerComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
],
providers: [ServersService],
bootstrap: [AppComponent]
})
export class AppModule { }

Servers.component.HTML

<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="list-group">
<a
class="list-group-item"
*ngFor="let server of servers"
[routerLink] = "['/servers', server.id]"
[queryParams]="{editable:1}"
fragment="loading">
{{ server.name }}
</a>
</div>
</div>
<div>
<router-outlet></router-outlet>
</div>
</div>

Server.component.TS

import { Component, OnInit } from '@angular/core';
import { ServersService } from '../servers.service';
import { Router , ActivatedRoute} from  '@angular/router';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
server: {id: number, name: string, status: string};
id:number;
queryParamsfromURL:{queryparams:""} = {queryparams:""};
fragmentsFromURL:string=""
constructor(private serversService: ServersService, private route: ActivatedRoute) {
}
ngOnInit() {
this.id = +this.route.snapshot.params['id'];
this.route.params.subscribe(
params => {this.id = +params['id']}
)
this.server = this.serversService.getServer(+this.id);
console.log(this.server);
//queryparams and fragments 
this.queryParamsfromURL.queryparams = this.route.snapshot.queryParams['editable'];
this.route.queryParams.subscribe(
newqueryparams => {this.queryParamsfromURL = newqueryparams.editable}
);

this.fragmentsFromURL = this.route.snapshot.fragment;
this.route.fragment.subscribe(
fragmentchange => {this.fragmentsFromURL = fragmentchange}
)   
}
}

Server.component.HTML

<div >
<h5> {{server.name}}</h5>
<p>Server status is {{server.status}}</p>
</div>

Answer 1

在ngOnInit内部设置路由侦听器，该侦听器只执行一次。这是根本原因。

代码

this.route.params.subscribe(
params => {this.id = +params['id']}
)
this.server = this.serversService.getServer(+this.id);

您想要的是serverService在路由改变时被调用，然而，这段代码在subscribe之外。因此，this.id得到更新，但this.server行永远不会再运行。

We want route changes =>调用服务=>服务调用的代码应该放在subscribe正文

中

this.route.params.subscribe(
params => {
this.id = +params['id']
this.server = this.serversService.getServer(+this.id);
})

Answer 2

请尝试添加href="#"在servers.component.html的锚标记中添加属性。

Servers.component.html:

<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="list-group">
<a
href="#"        // try this
class="list-group-item"
*ngFor="let server of servers"
[routerLink] = "['/servers', server.id]"
[queryParams]="{editable:1}"
fragment="loading">
{{ server.name }}
</a>
</div>
</div>
<div>
<router-outlet></router-outlet>
</div>
</div>