【问题标题】:Angular 7: problem with include ComponentAngular 7:包含组件的问题
【发布时间】:2019-05-09 11:26:26
【问题描述】:

我有这个组件,已经在 app.module.ts 中注册了:

    import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

export class ModalComponent {

  constructor(
    private messageService: MessageService
  ) { }

  onConfirm() {
  }

  showError(error) {
  }

}

但我不能将此组件包含在另一个组件中。 我收到此错误:

ERROR 错误:未捕获(承诺中):错误:StaticInjectorError(AppModule)[TopbarComponent -> ModalComponent]: StaticInjectorError(Platform: core)[TopbarComponent -> ModalComponent]:

这是我的 TopbarComponent:

import { Component } from '@angular/core';
import { SessionStorageService } from 'angular-web-storage';
import { Router } from "@angular/router"
import { AppComponent } from '../app.component';
import { ModalComponent } from '../modal/modal.component';
import { HomeComponent } from '../home/home.component';
import { JhttpService } from '../jhttp.service';

@Component({
  selector: 'app-topbar',
  templateUrl: './topbar.component.html'
})

export class TopbarComponent {

  user = this.session.get('USER');

  constructor(
    private jhttpService: JhttpService,
    private session: SessionStorageService,
    private router: Router,
    private glob: AppComponent,
    private modal: ModalComponent,
    private app: HomeComponent
  ) { }

  onLogoutButtonClick(event) {
    this.modal.showError('CIAO');
    event.preventDefault();
  }
}

有什么建议吗??

【问题讨论】:

标签: javascript angular


【解决方案1】:

不要在构造函数中添加组件。 还要确保另一个ModalComponent 需要成为使用它的模块的一部分。要么在使用它的模块中导入“ModalComponent”的模块,要么将ModalComponent添加到你正在使用它的模块的declaration数组中。

【讨论】:

  • 好的,我已经在模块中添加了componenti,但是我怎么能在那个组件中调用那个函数呢?.....而且,为什么只有ModalComponent给我这个错误??跨度>
  • 可能是因为 ModalComponet 不是正在使用它的模块的一部分。您仍然可以调用子组件方法:stackoverflow.com/questions/31013461/…
【解决方案2】:

从构造函数注入中移除组件。

import { Component } from '@angular/core';
import { SessionStorageService } from 'angular-web-storage';
import { Router } from "@angular/router"
import { AppComponent } from '../app.component';
import { ModalComponent } from '../modal/modal.component';
import { HomeComponent } from '../home/home.component';
import { JhttpService } from '../jhttp.service';

@Component({
  selector: 'app-topbar',
  templateUrl: './topbar.component.html'
})

export class TopbarComponent {

  user = this.session.get('USER');

  constructor(
    private jhttpService: JhttpService,
    private session: SessionStorageService,
    private router: Router
  ) { }

  onLogoutButtonClick(event) {
    this.modal.showError('CIAO');
    event.preventDefault();
  }
}

【讨论】:

  • 我在声明中声明:[ AppComponent, LoginComponent, HomeComponent, MenuComponent, SubMenuComponent, TopbarComponent, FooterComponent, ProfileComponent, BreadcrumbComponent, ModalComponent ],
  • 如果您正在注入可能导致问题的ModalComponent,您能否检查您的TopbarComponent
  • 我分享了 TopbarComponent!
  • 更新了答案。它应该可以解决您的问题。
  • 好的,但是这样ModalComponent中的modal.showError函数就不起作用了!
猜你喜欢
  • 2019-06-17
  • 2019-03-31
  • 1970-01-01
  • 2019-07-30
  • 2019-09-29
  • 2012-10-08
  • 2011-06-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多