Question

所以我刚开始编写Angular2（不是AngularJS）。我遵循了本教程：https://www.pluralsight.com/guides/front-end-javascript/getting-started-with-angular-2-by-building-a-giphy-search-application，得到的结果类似于：http://hitman666.github.io/giphy-search/（源代码：https://github.com/Hitman666/GiphySearch_Angular2）。

除了gifs是这个模型中的一个数组，我想从它们制作组件，然后每次都可以随机显示一个。我开始玩代码并制作组件，但我不确定如何将它们放在一起。它不再起作用，但它只是通过更改几行而忽略gif组件来完成教程。我刚开始在angulaire编程，所以我愿意接受任何建议。

这是我的代码：

app.components.ts

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';
import { GiffComponent } from '../giff/giff.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Giphy';
  http: Http;
  gif:string;

  link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';

    /*constructor(http: Http) {
        this.http = http;
    }*/
    constructor(gif:GiffComponent){

    }
  performSearch(searchTerm: HTMLInputElement): void {
    console.log(`User entered: ${searchTerm.value}`);
    var apiLink = this.link + searchTerm.value;

    this.http.request(apiLink)
        .subscribe((res: Response) => {
              this.gif = res.json().data;
              console.log(this.gif);
        });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http, Headers, HttpModule, URLSearchParams } from '@angular/http';
import { AppComponent } from './app.component';
import { GiffComponent } from '../giff/giff.component';


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

app.component.html

<div style="text-align:center">
  <h1>
    Application de recherche {{ title | uppercase }}!
  </h1>
  <input name="Rechercher" #searchTerm>

  <button (click)="performSearch(searchTerm)">Search</button>
<giff></giff>
  <br> 
  <div *ngFor="let j of giffs"> <img src="{{j.images.original.url}}"> </div>
</div>

- Gif文件夹（出于某种原因，我输入了giff）

giff.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'giff',
  templateUrl: './giff.component.html',
  styleUrls: ['./giff.component.css']
})
export class GiffComponent implements OnInit {
  @Input() gif
  src: string;
  link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
    giffs = [];
  constructor(private http:Http) { }

  getGif(searchTerm) {
    return this.http.get('http://api.giphy.com/v1/gifs/search?api_key=5927585945364280883a90015b9027cd&q=' + searchTerm + '&limit=1&lang=fr')
  }
  ngOnInit() {
    this.src='http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
  }

}

giff.component.html

import { Component, OnInit, Input } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'giff',
  templateUrl: './giff.component.html',
  styleUrls: ['./giff.component.css']
})
export class GiffComponent implements OnInit {
  @Input() gif
  src: string;
  link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
    giffs = [];
  constructor(private http:Http) { }

  getGif(searchTerm) {
    return this.http.get('http://api.giphy.com/v1/gifs/search?api_key=5927585945364280883a90015b9027cd&q=' + searchTerm + '&limit=1&lang=fr')
  }
  ngOnInit() {
    this.src='http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
  }

}

如果您不想查看本教程的源代码，那么以前是app.contents.ts，其中包含一层我改变的GIF（如果我将其粘贴回来应用程序工作）。

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';


@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})

export class AppComponent {
    title = 'Welcome to GiphySearch';
    link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
    http: Http;
    giphies = [];

    constructor(http: Http) {
        this.http = http;
    }

    performSearch(searchTerm: HTMLInputElement): void {
        var apiLink = this.link + searchTerm.value;

        this.http.request(apiLink)
            .subscribe((res: Response) => {
                  this.giphies = res.json().data;
                  console.log(this.giphies);
            });
    }
};

非常感谢你花时间阅读，正如我所说，任何建议都会非常感激： - ）

Angular2中使用Giphy API的迷你搜索引擎：我如何使用组件？

0 个答案: