带引导程序的 Angular 5

Posted 2023-03-13

【中文标题】带引导程序的 Angular 5

【英文标题】：Angular 5 with bootstrap

【发布时间】：2018-06-23 01:11:35

【问题描述】：

我正在使用 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()

  

【问题讨论】：

可能使用已经实现的引导组件在未来会有所帮助，这里的示例：valor-software.com/ngx-bootstrap/#/modals

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的回复。我在帖子中更新时解决了这个问题。