Использование компонента getter для рендеринга роутера не сработает? - PullRequest
Новая
       8

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

0 голосов
/ 23 сентября 2018

Я использую 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;
    }
}

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

шаблон 

<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

1 Ответ

0 голосов
/ 24 сентября 2018

Может показаться странным в начале, но здесь вы связываете 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;
    }
}

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

...