Использование средства получения компонентов для рендеринга ссылки маршрутизатора не будет работать?

Я использую angular 6 для разработки своего почтового приложения, у меня есть список почтовых ящиков для пользователей, которые могут щелкнуть ссылку, чтобы перейти к каждому почтовому ящику.

Однако, когда я использую компонент version A для визуализации списка, при нажатии на ссылку маршрутизатора ничего не произойдет (маршрут не будет запущен). Но version B работает как положено. И version A, и version B правильно отображают пользовательский интерфейс. Интересно, что происходит под капотом, это правильное поведение метода доступа геттера? Или это баг углового?

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>

обновления

демонстрационная ссылка: https://stackblitz.com/edit/angular-gitter-clsw1d


typescript angular getter routerlink
person Jean M.C.    schedule 23.09.2018    source источник
comment
Почему не [routerLink]="['mailboxes', mailbox.link]"?   -  person jonrsharpe    schedule 23.09.2018
comment
@jonrsharpe У меня есть еще один список, похожий на этот, он работает. Единственная разница в этих двух списках - это то, откуда берутся данные (один использует getter, другой - нет).   -  person Jean M.C.    schedule 23.09.2018
comment
Не могли бы вы подробнее рассказать, что именно идет не так - вы видите сообщения об ошибках при сборке или в консоли, какая разметка отображается, ...?   -  person jonrsharpe    schedule 23.09.2018
comment
@jonrsharpe дело в том, почему getter ведет себя иначе   -  person Jean M.C.    schedule 23.09.2018
comment
@jonrsharpe никаких ошибок при сборке или консоли, если элемент DOM точно такой же. Просто при переходе по ссылке роутера ничего не происходит.   -  person Jean M.C.    schedule 23.09.2018
comment
Пытался воспроизвести баг с геттером. Но он работает как положено ... вы можете показать определение вашего роутера?   -  person xrobert35    schedule 23.09.2018
comment
@ xrobert35 Я сделал образец stackblitz.com/edit/angular-gitter-clsw1d если вы нажмете на ссылки, URL-адрес не изменится. Но если вы раскомментируете другой код, чтобы не использовать getter, ссылки будут работать.   -  person Jean M.C.    schedule 24.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вначале это может показаться странным, но здесь вы связываете 2 получателя вместе, и в своей службе вы всегда возвращаете новый массив, поэтому, когда выполняется angular, проверяется, не изменилось ли значение, оно начинает входить некоторый бесконечный цикл, потому что значения в «никогда не исправляются», поскольку ваш массив всегда меняет ссылку (это не тот случай, когда вы это делаете в первый раз). Попробуйте изменить свою услугу:

@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;
    }
}

И все будет работать как положено.

person xrobert35    schedule 24.09.2018
comment
Я вижу, это значительно улучшило мою концепцию. Большое спасибо ! - person Jean M.C.; 24.09.2018