web-dev-qa-db-fra.com

Composant angulaire 6 ne se présente pas

Hier, je viens de commencer à apprendre Angular. Je m'excuse si quelque chose d’évident me manque, mais j’essaie d’afficher un composant dans le fichier app.component.html, mais il ne s’affiche pas.

Fichier TS pour le composant que j'essaie d'afficher: 

import { Component, OnInit } from '@angular/core';
import { ImageService } from '../shared/image.service';

@Component({
  selector: 'image-list',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.css']
})
export class ImageListComponent implements OnInit {

  images: any[];

  constructor(private _imageService : ImageService ) { }

  searchImages(query : string)
  {
    return this._imageService.getImage(query).subscribe
    (
      data => console.log(data),
      error => console.log(error),
      () => console.log("Request Completed!")
    );
  }

  ngOnInit() {
  } 
}

image-list.component.html:

<button>Find Images</button>

app.component.html:

<image-list></image-list>

app.module.ts 

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

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

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

image.service.ts

import { Injectable } from "@angular/core";
import { environment } from "../../environments/environment";
import { Http, Headers } from "@angular/http";
import { map, filter, scan } from 'rxjs/operators';

@Injectable()
export class ImageService
{
    private query: string;
    private API_KEY: string = environment.API_KEY;
    private API_URL: string = environment.API_URL;
    private URL: string = this.API_URL + this.API_KEY + '&q=';

    constructor(private _http: Http) {

    }

    getImage(query)
    {
        return this._http.get(this.URL + this.query).pipe(
            map((res) => res.json));
    }
}
htmlangular6
3
david moeller

Vous devez importer votre composant et votre service dans votre application app.module.ts, puis dans les déclarations et dans la propriété des fournisseurs.

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

import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list.component';
import { ImageService } from './image.service';

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

Ajustez le chemin ImageListComponent dans l'instruction d'importation.

Théoriquement lorsque vous générez un composant avec Angular CLI avec une commande comme celle-ci:

ng generate component image-list

il devrait mettre à jour votre fichier app.module.ts pour vous.

Générer une utilisation de service

ng generate service image
1
firegloves

J'ai eu un problème similaire en essayant d'utiliser un composant en dehors de son module . Dans ce cas, vous devez exporter un composant de votre .module.ts :

@NgModule({
    ...
    declarations: [ MyComponent ],
    exports: [ MyComponent ],
    ...
})
0
Viktor