Teile Komponente zwischen 2 Modulen

Question

Ich versuche, eine Component in 2 Module (Eltern und Kind) enthalten aber verschiedene Fehler im Prozess

app.module.ts

@NgModule({ 
    declarations: [SharedComponent], 
    exports: [SharedComponent]... 
})  

bekommen child.module.ts

@NgModule({ 
    imports: [SharedComponent], //Unexpected directive imported by module 
}) 

app.html

<div class="container"> 
    <shared-selector></shared-selector> 
    <child-selector></child-selector> 
</div> 

child.html

<div> 
    content 
    <shared-selector></shared-selector> 
</div> 

Ich lade die ChildModule in Async Materie

loadChildren: 'app/child.module#ChildModule', 

Wenn nicht importing oder declaring im ChildModule Ich erhalte der Fehler:

template parse error: shared-selector is not a known element 

****** UPDATE *******

wenn FeatureModule Erstellen, um die Komponenten ... updateed Code ... exportieren die SharedModule sollte arbeiten

SharedModule

@NgModule({ 
    imports: [ 
     CommonModule 
    ], 
    declarations: [ 
     SharedComponent 
    ], 
    exports: [ 
     SharedComponent 
    ] 
}) 

export class SharedModule {} 

app.module.ts

@NgModule({ 
    imports: [ChildModule, SharedModule],... 
})  

child.module.ts

@NgModule({ 
    imports: [SharedModule], //Unexpected directive imported by module 
}) 

Answer 1

Update

imports nur für Module, nicht-Komponenten. Ich bezweifle, es wird funktionieren, wenn die app.module exportiert die gemeinsame Komponente. Machen Sie stattdessen eine SharedModule oder MyFeatureModule und fügen Sie dieses Modul zu imports hinzu, wo Sie die Elemente verwenden möchten, die das Modul exportiert.

original

Eine Komponente kann nur declarations von hinzugefügt werden genau ein @NgModule()

Als Abhilfe ein neues Modul für die Komponente erstellen und das neue Modul zu imports: [...] der anderen beiden Module (wo man hinzufügen möchte es benutzen).

Siehe https://github.com/angular/angular/issues/11481#issuecomment-246186173

When you make a component part of a module you impart on it a set of rules when it is compiled. Having a component without belonging to a NgModule is meaningless as the compiler can't compile it. Having a component be part of more then one module is also weird as you are saying that depending which module you chose the rules for compiling are different. And when you dynamically load such a component it would be ambiguous which set of compilation rules you wanted.

The idea of removing that each component belongs to exactly one module is a no-go for the reasons stated above.

Answer 2

auch für Vollständigkeit, ... Laut Gunter Antwort SharedModule verwenden

**SharedModule** 

@NgModule({ 
    imports: [ 
     CommonModule 
    ], 
    declarations: [ 
     SharedComponent 
    ], 
    exports: [ 
     SharedComponent 
    ] 
}) 

export class SharedModule {} 

app.module.ts

@NgModule({ 
    imports: [ChildModule, SharedModule],... 
})  

Kind. Modul. ts

@NgModule({ 
    imports: [SharedModule] 
}) 

Answer 3

Sie haben die gemeinsam genutzte Komponente in Ihrem Provider sind: Abschnitt SharedModule. Dann aus dem abgeleiteten Modul, importieren Sie einfach SharedModule und Bingo.

import { PagingInfoComponent } from './paging/paging.component'; 

    @NgModule({ 
     providers: [ PagingInfoComponent ], 
     declarations: [ ], 
     exports: [ ] 
    }) 

    export class SharedModule {} 

Und in der abgeleiteten Modul,

import { SharedModule } from '../location/to/shared.module'; 
@NgModule({ 
imports: [SharedModule ] 
}); 

Answer 4

Sie auch Ihre Komponente mehr als einmal und erklären zum Beispiel MyComponentA in einem Modul und MyComponentB in einem anderen Modul exportieren.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my.component.html' 
}) 
class MyComponent { 
    constructor() {} 
} 

export class MyComponentA extends MyComponent {} 
export class MyComponentB extends MyComponent {} 

Answer 5

Erstellen Sie ein SharedModule. Deklarieren und exportieren Sie die SharedComponent.

shared.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { SharedComponent } from './shared'; 

@NgModule({ 
    declarations: [ 
    SharedComponent 
    ], 
    imports: [ 
    CommonModule 
    ], 
    exports: [ 
    SharedComponent 
    ], 
    providers: [ 

    ] 
}) 
export class SharedModule { } 

Import SharedModule in AppModule und alle anderen Module.

app.module.ts

import { SharedModule } from './shared.module'; 
    @NgModule({ 
    imports: [ 
     SharedModule 
    ] 
    })