用组件getter渲染路由器link不行？

Question

我正在使用 angular 6 开发我的电子邮件应用程序，我有一个邮箱列表供用户单击 link 转到每个邮箱。

然而，当我使用组件version A渲染列表时，点击路由器link时没有任何反应（不会触发路由）。但是 version B 按预期工作。 version A 和 version B 都能正确渲染 UI。我想知道幕后发生了什么，这是 getter 访问器的正确行为吗？或者这是 angular?

的错误

Angular version: 6.1.8
Browser: Chrome (desktop) version 69
Node version: v10.7.0
Platform: Mac

组件（版本 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;
    }
}

组件（版本 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;
    }
}

服务

@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' },
        ];
    }
}

模板

<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>

更新

演示 link：https://stackblitz.com/edit/angular-gitter-clsw1d

Answer 1

一开始可能看起来很奇怪，但在这里您将 2 getter 链接在一起并且在您的服务中您总是 return 一个 新数组 ，所以当 angular 正在检查值是否改变时，它开始进入某个无限循环，因为 "never fix" 处的值因为你的数组总是改变引用（这不是你做的第一种方式).尝试通过以下方式更改您的服务：

@Injectable()
export class EmailService {

    mailbox = [
            { 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' },
        ];

    public get mailboxes(): Mailbox[] {
        return this.mailbox;
    }
}

它会按预期工作。

用组件getter渲染路由器link不行？

Using component getter to render router link will not work?

getter

typescript

routerlink

angular

组件（版本 A）

组件（版本 B）

服务

模板

更新