Angular - Ionic - Невозможно создать всплывающее окно, ошибка внедрения компонента - PullRequest
Новая
       16

Angular - Ionic - Невозможно создать всплывающее окно, ошибка внедрения компонента

0 голосов
/ 18 мая 2018

Я пытаюсь показать Popover, используя Ionic Framework v3, у меня есть ионная страница, которая содержит компонент списка, в этом списке у меня есть кнопка, которая покажет поповер.Итак, я объявил свой компонент popover на родительской странице и создал в списке источник событий, который отправит родителю информацию о переключателе.

Но я получил данную ошибку: 

No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?

Код модуля страницы: 

@NgModule({
    declarations: [
        PopoverComponent
    ],
    imports: [
        IonicPageModule.forChild(MyCustomPage),
    ],
    entryComponents: [
        PopoverComponent
    ]
})
export class MyCustomModule {}

Код страницы: 

@Component({
    selector: 'my-custom-page',
    templateUrl: 'my-custom-page.html'
})
export class MyCustomPage {

    public constructor(public popoverCtrl: PopoverController) { }

    public toggleFilters() {
        const popover = this.popoverCtrl.create(PopoverComponent);
        popover.present();
    }
}

шаблон страницы: 

<my-custom-list (onFilterToggle)="toggleFilters()"></my-custom-list>

Список компонентов: 

 @Component({
    selector: 'my-custom-list',
    templateUrl: 'my-custom-list.component.html'
 })
 export class MyCustomListComponent {

     @Output() onFilterToggle: EventEmitter<void> = new EventEmitter<void>();
     public showFilters() {
         this.onFilterToggle.emit();
     }
 }

Шаблон компонента: 

 <button (click)="showFilters()">Test</button>

Код поповера: 

@Component({
    selector: 'my-popover',
    template: '<p>Test</p>'
})
export class PopoverComponent {

    constructor(public viewCtrl: ViewController) {}

    close() {
        this.viewCtrl.dismiss();
    } 
}

У меня есть общий модуль, который загружен на все мои страницы, яЯ пытался добавить это здесь, но все еще та же ошибка, я пытался добавить это к entryComponents в компоненте списка, в модуле приложения и все той же ошибке.

Если у кого-то есть идея.

1 Ответ

0 голосов
/ 18 мая 2018

Итак, я нашел решение, просто добавив декоратор IonicPage в компонент popover.Создайте модуль, который объявляет компонент и удаляет объявления и входные компоненты.Не загружайте модуль в другой модуль, Ionic сделает это.Таким образом, код для поповера будет: 

@IonicPage({
    name: 'my-popover'
})
@Component({
    selector: 'my-popover',
    template: '<p>Test</p>'
})
export class PopoverComponent {

    constructor(public viewCtrl: ViewController) {}

    close() {
        this.viewCtrl.dismiss();
    } 
}

, а модуль будет: 

import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {IonicPageModule} from 'ionic-angular';
import {PopoverComponent} from './components';

@NgModule({
    declarations: [
        PopoverComponent
    ],
    imports: [
        IonicPageModule.forChild(PopoverComponent)
    ],
    exports: [
        PopoverComponent
    ]
})
export class MyPopoverModule {}

Чтобы вызвать поповер, просто используйте имя страницы, например: 

this.popoverCtrl.create('my-popover');
...