Angular 6 组件没有显示

Question

我昨天才开始学习 Angular，所以如果我遗漏了一些明显的东西，我深表歉意，但我试图在 app.component.html 上显示一个组件，但是它没有显示出来。

我要显示的组件的 TS 文件：

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() {
  } 
}

图片列表.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));
    }
}

Answer 1

我在尝试使用其模块外部的组件时遇到了类似的问题。 在这种情况下，您必须从 .module.ts:

中导出一个组件

@NgModule({
  // …
  declarations: [ MyComponent ],
  exports: [ MyComponent ],
  // …
})

Answer 2

您需要将您的组件和服务导入到您的 app.module.ts 中，然后导入声明和提供者属性

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 { }

将 ImageListComponent 路径调整到 import 语句中。

通常，当您使用 Angular CLI 使用如下命令生成组件时：

ng generate component image-list

它应该为你更新你的 app.module.ts 文件。

生成服务用途

ng generate service image

Answer 3

检查这个

在src/app/app.module.ts

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

来自此链接：https://malcoded.com/posts/why-angular-not-works/

Answer 4

您可以从以下网址尝试 Angular 教程：https://angular.io/start。它展示了如何在 app.component.html 页面上呈现自定义 Ansible 组件。

您只需要更新

app.module.ts

文件。假设您的组件名为

ImageListComponent

：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; // add this line

import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list/image-list.component'; // add this line

@NgModule({
  declarations: [
    AppComponent,
    ImageListComponent // add this line
  ],
  imports: [
    BrowserModule,
    // add the following 3 lines
    RouterModule.forRoot([
      { path: '', component: ImageListComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

首先尝试这个，不添加任何自定义服务。

Answer 5

看来您在

searchImages

中没有任何东西可以触发您的方法

ImageComponent

上的API 调用。在

<button>Find Images</button>

标签上设置一个 click eventListener 应该可以解决问题。还要在您的

ImageComponent

文件中注册

ImageService

和

app.module.ts

。

Answer 6

对我来说，问题是我在 html 中遇到错误，恰好在角度生成的组件中，它没有编译。

比如我有一个组件，在组件中输入了

[data]="data"

，但是由于传递的那一刻数据是

undefined

（即根本没有取到），它导致了NPE，或者

TypeError: Can not read properties of undefined

.

看看你有没有 a) 强制使用 ! 预取数据，例如

data!:string

。如果是 - 将其更改为

data?:string

，并在出现问题的任何地方使用

*ngIf

修复上面的某处。

祝你好运！