Let's break down this issue from two different perspectives - the user's and the developer's.
The user's perspective:
Upon clicking "Edit Server", the user expects to be able to edit the server. However, this functionality is not working as intended. To illustrate, I will provide two images showcasing this problem:
(1) https://i.sstatic.net/S6bJA.png
(2) https://i.sstatic.net/t6oKb.png
Clearly, this behavior is not desired.
Developer's perspective:
As the developer (myself), I am new to routing but will guide you through the relevant code. The issue arises when subscribing to queryParams, as it returns an empty object. This could possibly be due to the following code:
this.router.navigate(['edit', { queryParams: {allowEdit: this.server.id == 3 ? '1' : '0'}}],
{relativeTo: this.route})
It seems like this code block is not functioning as expected. Could it be related to its timing of execution? I will provide the necessary code snippets in this question thread on Stack Overflow, along with the GitHub repository link for a comprehensive view of the project.
App Module Code
// Relevant paths configuration
// Previously, ':id' and ':id/edit' were at the same level, but now 'edit' is nested under 'servers' as a child of 'server'. However, the EditComponent is not loading correctly, and its ngOnInIt is not functioning properly.
{
path: 'servers',
component: ServersComponent,
children: [
{
path: ':id',
component: ServerComponent,
children: [
{
path: 'edit',
component: EditServerComponent
},
]
}
]
},
Servers HTML Template:
<div class="list-group">
<a
[routerLink] = "['/servers', server.id]"
href="#"
class="list-group-item"
*ngFor="let server of servers">
{{ server.name }}
</a>
</div>
<router-outlet></router-outlet>
Server HTML Template:
<!-- The display section handles what to display, 'edit-server' or 'server'. This part is functioning correctly. The key component is the button below -->
<div [ngSwitch]="display">
<div *ngSwitchDefault>
<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>
<button class="btn btn-primary" (click)="onEdit()">Edit Server</button>
</div>
<div *ngSwitchCase="1">
<router-outlet></router-outlet>
</div>
</div>
Edit-Server TS:
server: {id: number, name: string, status: string};
serverName = '';
serverStatus = '';
allowEdit: boolean
id: number
constructor(private serversService: ServersService, private route: ActivatedRoute) { }
ngOnInit() {
this.route.snapshot.queryParams
this.route.snapshot.fragment
this.route.queryParams.subscribe((params: Params) => {
this.allowEdit = params['allowEdit'] == '1' ? true : false
})
this.route.params.subscribe((params: Params) => {
this.id = +params['id']
})
this.server = this.serversService.getServer(this.id);
this.serverName = this.server.name;
this.serverStatus = this.server.status;
}
onUpdateServer() {
this.serversService.updateServer(this.server.id, {name: this.serverName, status: this.serverStatus});
}
}
Edit Server Template:
<h4 *ngIf="!allowEdit">No editing the server!</h4>
<div *ngIf="allowEdit">
<!-- The code inside here will not execute as allowEdit is always false -->
</div>
How can I determine why the params object is empty? Feel free to explore the full project in the following GitHub repository: