Angular 5项目运行报错求助及采用@ViewChild的解决方案

我在开发Angular 5项目时，尝试在Home组件里直接注入Popupmodal组件来调用它的弹窗方法，结果运行时出现了错误。以下是我最初的相关代码：

初始代码 #

应用模块（App Module） #

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组件的构造函数里直接注入Popupmodal组件，但Angular的组件不能像服务那样直接注入——组件是需要在模板中声明后才能实例化的对象，并非可注入的服务类，这就是报错的核心原因。

解决方法 #

我改用@ViewChild装饰器来获取Popupmodal组件的实例，修改后的home.ts代码如下：

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(){
 }
}

这样修改后，就能正确获取到Popupmodal组件的实例，顺利调用它的openModalPopUP()方法了。

内容的提问来源于stack exchange，提问作者user5801655