Javascript 角6服务注入异常

我两天前开始使用angular，我正在尝试创建一个服务，该服务将在我的spring boot rest端点上执行get请求，我希望在angular应用程序中显示结果

这是我到现在为止一直在尝试的

我的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ITweet } from './itweet';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class ReactiveTwitterService {

    constructor(private http_client: HttpClient, private tweetTag: string) { }
    spring_webflux_service_url = 'http://localhost:8081/search';

    myTweets: Observable<ITweet[]>;

    setTweetTag(tag) {
        this.tweetTag = tag;
    }

    seearchTweets() {
        this.myTweets = this.http_client.get<ITweet[]>(this.spring_webflux_service_url + '/' + this.tweetTag);
    }

    getTweets() {
        return this.myTweets;
    }

}

我的应用程序模块看起来像这样

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

import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SerachBarComponent } from './serach-bar/serach-bar.component';
import { SearchReasultComponent } from './search-reasult/search-reasult.component';
import { HeaderComponent } from './header/header.component';
import { ResultItemComponent } from './result-item/result-item.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SerachBarComponent,
    SearchReasultComponent,
    ResultItemComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在谷歌上搜索到，由于服务实现中的providedIn指令，没有必要在提供者中设置我的服务

我使用此服务的组件

export interface ITweet {

    id: {
        text: string,
        name: string
    };
    tag: string;


}

import { Component, HostListener } from '@angular/core';



@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    innerWidth: number;
    styleClass = {
        wide_screen: 'w3-light-grey',
        break_point: 'w3-dark-grey'
    };


    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    getStyle() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }
}

和

import { Component, OnInit, HostListener } from '@angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';

@Component({
    selector: 'app-serach-bar',
    templateUrl: './serach-bar.component.html',
    styleUrls: ['./serach-bar.component.css']
})
export class SerachBarComponent implements OnInit {
    innerWidth: number;

    constructor(private twiterService: ReactiveTwitterService) { }

    placeholder = 'search';

    styleClass = {
        wide_screen: 'w3-input w3-light-grey',
        break_point: 'w3-input w3-white'
    };

    doSearch(tag) {
        this.twiterService.setTweetTag(tag);
        this.twiterService.seearchTweets();
    }


    ngOnInit() {
    }

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    getStyle() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }
}

import { Component, OnInit, HostListener } from '@angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';
import { ITweet } from '../itweet';

@Component({
    selector: 'app-search-reasult',
    templateUrl: './search-reasult.component.html',
    styleUrls: ['./search-reasult.component.css']
})
export class SearchReasultComponent implements OnInit {

    search_result: ITweet[];
    innerWidth: number;
    constructor(private _twitterService: ReactiveTwitterService) { }
    styleClass = {
        wide_screen: 'w3-ul w3-hoverable',
        break_point: 'w3-green w3-container'
    };


    ngOnInit() {
        this._twitterService.getTweets().subscribe(tweet => this.search_result = tweet);
    }

    is_search_result_empty() {
        return this.search_result === [];
    }

    set_search_result_empty() {
        this.search_result = [];
    }

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    get_list_style() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }

}

和

import { Component, OnInit, HostListener } from '@angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';

@Component({
    selector: 'app-serach-bar',
    templateUrl: './serach-bar.component.html',
    styleUrls: ['./serach-bar.component.css']
})
export class SerachBarComponent implements OnInit {
    innerWidth: number;

    constructor(private twiterService: ReactiveTwitterService) { }

    placeholder = 'search';

    styleClass = {
        wide_screen: 'w3-input w3-light-grey',
        break_point: 'w3-input w3-white'
    };

    doSearch(tag) {
        this.twiterService.setTweetTag(tag);
        this.twiterService.seearchTweets();
    }


    ngOnInit() {
    }

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    getStyle() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }
}

import { Component, OnInit, HostListener } from '@angular/core';
import { ReactiveTwitterService } from '../reactive-twitter.service';
import { ITweet } from '../itweet';

@Component({
    selector: 'app-search-reasult',
    templateUrl: './search-reasult.component.html',
    styleUrls: ['./search-reasult.component.css']
})
export class SearchReasultComponent implements OnInit {

    search_result: ITweet[];
    innerWidth: number;
    constructor(private _twitterService: ReactiveTwitterService) { }
    styleClass = {
        wide_screen: 'w3-ul w3-hoverable',
        break_point: 'w3-green w3-container'
    };


    ngOnInit() {
        this._twitterService.getTweets().subscribe(tweet => this.search_result = tweet);
    }

    is_search_result_empty() {
        return this.search_result === [];
    }

    set_search_result_empty() {
        this.search_result = [];
    }

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    get_list_style() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }

}

我的模板是

export interface ITweet {

    id: {
        text: string,
        name: string
    };
    tag: string;


}

import { Component, HostListener } from '@angular/core';



@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    innerWidth: number;
    styleClass = {
        wide_screen: 'w3-light-grey',
        break_point: 'w3-dark-grey'
    };


    @HostListener('window:resize', ['$event'])
    onResize(event) {
        this.innerWidth = window.innerWidth;
    }

    getStyle() {
        return (innerWidth > 769) ? this.styleClass.wide_screen : this.styleClass.break_point;
    }
}

AppComponent

<div class="{{getStyle()}}" style="width: 100%;height: 100%;">
  <app-header></app-header>
  <app-serach-bar></app-serach-bar>
  <app-search-reasult></app-search-reasult>
</div>

<div class="w3-container" *ngIf="!is_search_result_empty">
  <ul class="{{get_list_style()}}">
    <app-result-item *ngFor="let current_item of search_result; trackBy:current_item.id" [item]="current_item"></app-result-item>
  </ul>
</div>

我应该怎么做才能解决这个问题呢？？？
您需要在模块中将服务添加到提供者中，当然记得导入服务

    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        SerachBarComponent,
        SearchReasultComponent,
        ResultItemComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule
      ],
      providers: [
        ReactiveTwitterService 
      ],
      bootstrap: [AppComponent]
    })

在您的代码
构造函数（private{u twitterService:ReactiveTwitterService）{}
中，无法初始化
private tweetTag:string
，因此它仍然会失败，
@Injectable（{providedIn:'root'}）
与
提供程序的作用不同：[ReactiveTwitterService]
您的服务应作为提供商提供给您的组件或模块。
您可以将其添加到appmodule的
提供程序：
数组或单个模块中，并将其注入组件中以供使用。
我已经尝试过这一点，但同样的问题，由于使用@Injectable（{providedIn:'root'}），因此这不再是强制性的。更新后是否尝试重新启动服务器，我的意思是你需要重新运行
ng service
我确信这可以解决你的问题，你需要从服务构造函数中删除
private tweetTag:string
，并为它创建setter函数，这就是为什么它仍然在你的代码
构造函数中显示错误（private\u twitterService:ReactiveTwitterService）{}
无法初始化
私有tweetTag:string
，因此它仍然失败，
@Injectable（{providedIn:'root'}）
与
提供者：[ReactiveTwitterService]
我已经尝试过这个方法，但是同样的问题，因为使用了@Injectable，这不再是强制性的({providedIn:'root'}）