Угловая составная часть двух объявлений

Question

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

add.button.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'add-button',
  template: `
  <ion-buttons end>
    <button ion-button icon-only (click)="navToAdd()">
      <ion-icon name="md-add-circle"></ion-icon>
    </button>
  </ion-buttons>`
})

export class AddButton {
  visible: boolean = true;

  @Output() navigate: EventEmitter<any> = new EventEmitter();

  navToAdd() {
    this.navigate.emit(null)
  }
}

app.modules.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

users.module.ts - Так же, как users.module.ts, существуют другие модули страницы, где я хочу использовать компонент так же, как я его используюв users.module.ts ниже

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
})
export class UsersPageModule { }

Answer 1

Если вы считаете, что ButtonComponent не подходит для использования в общем модуле, создайте отдельный модуль для AddButton.Теперь этот новый модуль должен объявить и экспортировать AddButtonComponent.Вы должны импортировать этот новый модуль в тот дочерний модуль, для которого вы хотите его использовать.Это не должно вызывать никаких проблем.Это также избавит вас от загрузки всех общих компонентов только для того, чтобы заставить AddComponent работать.

Рекомендуется создать еще один модуль для компонента, если он используется в нескольких местах / модулях.

Answer 2

добавьте ваш AddButton компонент в exports массив users.module.ts, чтобы вы могли использовать его в других модулях, где UsersModule импортируется

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
  exports: [
    AddButton
  ]
})
export class UsersPageModule { }

Answer 3

Если вы создадите компонент с ionic cli с ионным g компонентом AddButton , он автоматически создаст ComponentsModule и ваш новый компонент в этом модуле.

И использовать этот компонент вдругие модули, которые вам нужно просто импортировать в нужные вам модули.

Также в вашем ComponentModule вы должны добавить imports: [IonicModule], чтобы иметь возможность использовать ионные компоненты, такие как ion-button

Answer 4

Ваш AddButton, вероятно, должен быть на Shared модуле , и тогда вы сможете использовать его в нескольких местах, импортируя модуль