При использовании модуля в другом модуле, содержимое перезаписывается - PullRequest
Новая
       35

При использовании модуля в другом модуле, содержимое перезаписывается

1 голос
/ 29 мая 2019

Мне нужно использовать компонент (ReportComponent) в другом компоненте (ContactsComponent) через селектор <app-reports>.

Для обоих компонентов я использую модули, поэтому, когда я пытаюсьимпортируйте ReportModule в ContactsDetailsModule, бывает, что содержимое ContactDetailsComponent полностью перезаписывается содержимым ReportComponent (даже без использования селектора html).

Это report.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule, DatePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { UiSwitchModule } from 'ngx-toggle-switch';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { QuillModule } from 'ngx-quill';
import { ReportComponent } from './report.component';
import { sanitizeHtmlPipe } from './sanitize-html.pipe';
import { BrowserModule } from '@angular/platform-browser';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Report',
      urls: [
        { title: 'Dashboard', url: '/dashboard' },
        { title: 'Report' }
      ]
    },
    component: ReportComponent
  }
];

@NgModule({
  imports: [FormsModule, CommonModule, RouterModule.forChild(routes), NgbModule.forRoot(), QuillModule, UiSwitchModule, ToastrModule.forRoot()],
  declarations: [ReportComponent, sanitizeHtmlPipe],
  exports: [ReportComponent, sanitizeHtmlPipe],
  providers: [DatePipe, ToastrService]
})
export class ReportModule {}

Это contacts-datails.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ContactsDetailsComponent } from './contacts-details.component';
import { ReportModule } from '../report/report.module';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Contacts Details',
      urls: [
        { title: 'Dashboard', url: '/dashboard' },
        { title: 'Contacts', url: '/contacts' },
        { title: 'Contacts Details' }
      ]
    },
    component: ContactsDetailsComponent
  }
];

@NgModule({
  imports: [FormsModule, CommonModule, RouterModule.forChild(routes), NgbModule.forRoot(), ReportModule /* <-- When import ReportModule content of ContactsDetailsComponent (html) is overwrites */ ],
  declarations: [ContactsDetailsComponent],  
  exports: [ContactsDetailsComponent],
})
export class ContactsDetailsModule {}

Можете ли вы помочь мне понять, что я делаю неправильно?

...