My email application is being developed using angular 6, featuring a list of mailboxes for users to access by clicking on the provided link.
Interestingly, when utilizing component version A to display the mailbox list, clicking on the router link does not trigger any route, whereas version B functions perfectly as expected. Both version A and version B deliver the UI flawlessly. I'm left wondering about the mechanisms behind this behavior - is it the correct function of the getter accessor, or possibly a bug within Angular?
Angular version: 6.1.8
Browser: Chrome (desktop) version 69
Node version: v10.7.0
Platform: Mac
component (version A)
import { Component } from '@angular/core';
import { EmailService } from '~/email/services/email.service';
@Component({
templateUrl: '../views/email.view.html',
})
export class EmailComponent {
public constructor(private emailService: EmailService) {}
public get mailboxes(): Mailbox[] {
return this.emailService.mailboxes;
}
}
component (version B)
import { Component, OnInit } from '@angular/core';
import { EmailService } from '~/email/services/email.service';
@Component({
templateUrl: '../views/email.view.html',
})
export class EmailComponent implements OnInit {
public mailboxes: Mailbox[];
public constructor(private emailService: EmailService) {}
public async ngOnInit(): Promise<void> {
this.mailboxes = this.emailService.mailboxes;
}
}
service
@Injectable()
export class EmailService {
public get mailboxes(): Mailbox[] {
return [
{ name: 'Inbox', icon: 'inbox', link: 'inbox' },
{ name: 'Sent', icon: 'send', link: 'sent' },
{ name: 'Drafts', icon: 'drafts', link: 'drafts' },
{ name: 'Spam', icon: 'report', link: 'spam' },
{ name: 'Trash', icon: 'delete', link: 'trash' },
{ name: 'Archive', icon: 'archive', link: 'archive' },
];
}
}
template
<mat-nav-list>
<a mat-list-item *ngFor="let mailbox of mailboxes"
[routerLink]="['mailboxes', mailbox.link]">
<mat-icon matListIcon>{{mailbox.icon}}</mat-icon>
<h4 matLine>{{mailbox.name}}</h4>
</a>
</mat-nav-list>
updates
Find the demo link here: https://stackblitz.com/edit/angular-gitter-clsw1d