带引导程序的 Angular 5

Question

我正在使用 Angular 5，在运行我的应用程序时出现错误，Angular error

你能帮我解决这个问题吗？提前致谢。

这是正在进行的代码，因此在下面的代码中没有使用很少的导入模块。

我的应用模块，

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


import { AppComponent } from './app.component';
import {Header} from './ts/header';
import {Footer} from './ts/footer';
import {DisplayModuleModule} from './display-module/display-module.module';
import {RoutingModule} from './routing/routing.module';

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

在这个 RoutingModule 中是我的自定义模块，如下所示，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule, Routes} from '@angular/router';

import {BusinessModule} from '../business/business.module';
import {Popupmodal} from './ts/popupmodal';
import {Home} from './ts/home';

const routes: Routes = [
  {'path':'', 'redirectTo':'/home', 'pathMatch':'full'},
  {'path':'home', 'component':Home}
]
@NgModule({
  imports: [
    CommonModule,
    BusinessModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [
    Home,
    Popupmodal
  ],
  exports:[
    RouterModule,
    BusinessModule
  ]
})
export class RoutingModule { }

home.ts

import {Component, Inject} from '@angular/core';
import {Router} from '@angular/router';
import {Popupmodal} from './popupmodal';

@Component({
  selector : 'home-page',
  templateUrl:'../html/home.html'
})
export class Home{
  display= 'none';
  constructor(@Inject(Router) private route:Router,
              @Inject(Popupmodal) private modal: Popupmodal){

  }
  openPopUP(){
    this.display = 'block';
    this.modal.openModalPopUP();
  /*this.route.navigate(['/popUp']).then(nav => console.log('Successfuly Navigated'),
  );*/
  }
  closePopUp(){
    this.display = 'none';
  }

}

home.html

    <div>
      <button (click)="openPopUP()" >Click</button>

    </div>

popupmodal.ts

import {Component} from '@angular/core';    
@Component({
  selector: 'popup-modal',
  templateUrl:'../html/popupModal.html'
})
export class Popupmodal{
  display= 'none';
  openModalPopUP(){
    this.display = 'block';
  }
  closeUpPopUp(){
    this.display = 'none';
  }
}

popupModal.html

<div class="backdrop" [ngStyle]="{'display':display}"></div>

<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" aria-label="Close" (click)="closeUpPopUp()"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title">Model Title</h4>

      </div>

      <div class="modal-body">

        <p>Model body text</p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" (click)="closeUpPopUp()" >Close</button>

      </div>

    </div><!-- /.modal-content -->

  </div><!-- /.modal-dialog -->

</div><!-- /.modal !-->

更新 我通过在 home.ts 中使用 @ViewChild 解决了这个问题，如下所示，

import {Component, Inject, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {Popupmodal} from './popupmodal';

@Component({
  selector : 'home-page',
  templateUrl:'../html/home.html'
})
export class Home{
  @ViewChild(Popupmodal) modal : Popupmodal;

  openPopUP(){
    this.modal.openModalPopUP();
  /*this.route.navigate(['/popUp']).then(nav => console.log('Successfuly Navigated'),
  );*/
  }
  closePopUp(){

  }

}

Answer 1

没有提供者错误通常意味着您应该将服务添加到您使用它的模块或组件的提供者部分。

在您的情况下，我想您需要像这样添加 Popupmodal。

@NgModule({ imports: [ CommonModule, BusinessModule, RouterModule.forRoot(routes) ], declarations: [ Home ], exports:[ RouterModule, BusinessModule ], providers:[Popupmodal] })

我没有测试它，所以你可能需要将它保留在声明中（之前没有尝试过注入组件），或者尝试不同的组合位置。但问题的核心基本上是：要让角度注入器注入一些东西，你需要为它注册一个提供者。 official explication