Angular 6组件未显示
Angular 6组件未显示
提问于 2018-06-08 00:12:05
我昨天刚开始学习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() {
}
}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));
}
}回答 3
Stack Overflow用户
发布于 2018-06-08 04:16:05
您需要将组件和服务导入到app.module.ts中，然后导入到声明和providers属性
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路径调整到导入语句中。
理论上，当您使用类似以下命令的Angular CLI生成组件时：
ng generate component image-list它应该会为您更新app.module.ts文件。
生成服务使用
ng generate service imageStack Overflow用户
发布于 2019-11-01 23:57:03
你可以尝试从https://angular.io/start下载Angular教程。它展示了如何在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 { }首先尝试一下，不添加任何自定义服务。
Stack Overflow用户
发布于 2020-08-22 02:43:43
在ImageComponent中，似乎没有任何东西可以触发方法searchImages上的API调用。在<button>Find Images</button>标签上单击eventListener应该可以做到这一点。还要在app.module.ts文件中注册ImageComponent和ImageService。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50745851
复制相关文章
相似问题
腾讯云开发者
