Angular 5带有bootstrap

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';
  }
}

弹出窗口Modal.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