Domanda Come importare componenti in un altro componente root in Angular 2


Sto cercando di importare il componente da un file un altro file componente root. dà errore come ..

zone.js: 484 Rifiuto di Promessa non gestita: errori di analisi del modello:   'corsi' non è un elemento noto:   1. Se 'courses' è un componente Angular, quindi verificare che faccia parte di questo modulo.   2. Se "corsi" è un componente Web, aggiungere "CUSTOM_ELEMENTS_SCHEMA" al "@ NgModule.schema" di questo componente per sopprimere questo messaggio. ("

My First Angular 2 App

[ERRORE ->] "): AppComponent @ 0: 31; Zona:; Attività: Promise.then; Valore: Errore: Errori di analisi modello: (...) Errore: Errori di analisi modello:   'corsi' non è un elemento noto:

Il mio app.component.ts è come [root component file]

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><courses></courses>',
  directives:[CoursesComponent],
})

export class AppComponent { }

e i miei courses.component.ts essere;

import { Component } from '@angular/core';
@Component({
  selector: 'courses',
  template: '<h1>courses</h1>'
})
export class CoursesComponent { }

durante l'importazione del componente dei corsi dal file courses.component.ts all'interno di app.component non sono in grado di dichiarare direttive all'interno @Component{}

directives:[CoursesComponent] dandomi un errore

Si prega di avvisare la soluzione su di esso.


44
2017-09-09 11:20


origine


risposte:


Dovresti dichiararlo con declarations array(meta property) of @NgModule come mostrato di seguito (RC5 and later),

import {CoursesComponent} from './courses.component';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,CoursesComponent],  //<----here
  providers:    [],      
  bootstrap:    [ AppComponent ]
})

54
2017-09-09 11:25



Per Angular RC5 e RC6 devi dichiarare il componente nel metadata decorator del modulo declarations chiave, quindi aggiungi CoursesComponent nel tuo modulo principale declarations come sotto e rimuovere directives a partire dal AppComponent metadati.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CoursesComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

32
2017-09-09 11:25



Angolare RC5 e RC6

Se riscontri l'errore sopra menzionato nei tuoi test di Jasmine, è molto probabile che devi dichiarare il componente non cedibile nel tuo TestBed.configureTestingModule({}).

TestBed configura e inizializza un ambiente per il test dell'unità e fornisce metodi per la simulazione / creazione / iniezione di componenti e servizi nei test unitari.

Se non si dichiara il componente prima dell'esecuzione dei test unitari, Angular non saprà cosa <courses></courses> è nel tuo file di modello.

Ecco un esempio:

import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {AppComponent} from "../app.component";
import {CoursesComponent} from './courses.component';

describe('CoursesComponent', () => {
  let component: CoursesComponent;
  let fixture: ComponentFixture<CoursesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CoursesComponent
      ],
      imports: [
        BrowserModule
        // If you have any other imports add them here
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CoursesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

12
2018-05-13 08:35



sopra le risposte In parole semplici, devi registrarti sotto @NgModule'S

declarations: [
    AppComponent, YourNewComponentHere
  ] 

di app.module.ts

non dimenticare di import quel componente.


7
2018-05-21 23:57