依賴注入創建多個實例

Question

我有一個組件用於向我的應用程序顯示一些常用輸出。該組件被注入到其他服務中，以便這些服務可以觸發該行爲。經過很多故障排除之後，我認爲我已經跟蹤了Angular的DI創建該組件的多個實例的問題。我創建了一個說明問題的簡單版本。這是與角的2.4.x

的AppModule：

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http'; 

import {AppComponent} from './app.component'; 
import {TestComponent} from "./test.component"; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     TestComponent 
    ], 
    imports: [BrowserModule, FormsModule, HttpModule], 
    providers: [TestComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

測試組件（這是我想用它來顯示信息，並把它作爲一個服務組件的簡化版本）：

import {Component, OnInit} from '@angular/core'; 
@Component({ 
    selector: 'app-test', 
    template: `<p>Message:</p> 
    <p *ngIf="show">hi</p>` 
}) 
export class TestComponent { 
    private show: boolean = false; 
    doTest() { 
     setTimeout(() => { 
      console.log('timeout callback'); 
      this.show = true; 
     }, 5000); 
    } 
} 

應用程序組件（使用我的測試色差分量）：

import {Component, OnInit} from '@angular/core'; 
import {TestComponent} from "./test.component"; 

@Component({ 
    selector: 'app-root', 
    template:` 
<h1>{{title}}</h1> 
<app-test></app-test> 
` 
}) 
export class AppComponent implements OnInit{ 
    title = 'app works!'; 
    constructor(private test: TestComponent) { } 
    ngOnInit() { 
     this.test.doTest(); 
    } 
} 

我的行爲希望AppComponent會調用TestComponent的doTest函數，並且TestComponent會在5秒後顯示'hi'消息。

回調發生，我看到控制檯消息，但'嗨'不顯示。我認爲這對於提供單獨實例的依賴注入來說很重要，因此注入App的構造函數的實例與App的模板中的實例不同。

如果我的理解是正確的，我該如何使它在兩種情況下都是相同的實例？我錯過了一個更好的方式去實現這種行爲？

Answer 1

您需要使用裝飾器ViewChild訪問子組件，而不是將其注入到構造函數中。直覺上，你試圖做的事情是有道理的，但它不起作用。

請注意，正如Alexander Staroselsky在他的評論中指出的那樣，您不應該在providers陣列中列出任何組件！

以下是你需要寫

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

@Component({ 
    selector: 'app-test', 
    template: ` 
     <p>Message:</p> 
     <p *ngIf="show">hi</p> 
    ` 
}) 
export class AppTestComponent { 
    doTest() { 
     setTimeout(() => { 
      console.log('timeout callback'); 
      this.show = true; 
     }, 3000); 
    } 
    show = false; 
} 

@Component({ 
    selector: 'my-app', 
    template: '<app-test></app-test>', 
}) 
export class App { 
    // this queries your view for elements of the type passed to the 
    // ViewChild decorator factory. 
    @ViewChild(AppTestComponent) test: AppTestComponent; 

    ngAfterContentInit() { 
     this.test.doTest(); 
    } 
} 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [App, AppTestComponent], 
    bootstrap: [App] 
}) 
export class AppModule { } 

這裏是什麼工作示例

https://plnkr.co/edit/DDx4INrgixsnJKiU1E0h?p=preview

如果你只是從您的視圖的子組件的工作，你可以離開了所有附加的裝飾器和生命週期鉤子。

例如：

@Component({ 
    selector: 'my-app', 
    template: ` 
     <!-- give the child component a name for use in the template --> 
     <app-test #test> 
     </app-test> 
     <button (click)="test.doTest()">Do Test</button> 
    `, 
}) 
export class App {} 

這裏是一個工作示例

https://plnkr.co/edit/nnXW2z7pbgdTk5Qzl1Sw?p=preview