依赖注入创建多个实例

Question

我有一个组件用于向我的应用程序显示一些常见的输出。该组件被注入到其他服务中，以便这些服务可以触发该行为。经过大量故障排除后，我想我已经将问题跟踪到 Angular 的 DI 创建组件的多个实例。我创建了一个简单的版本来说明这个问题。这是 Angular 2.4.x

应用模块：

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

App 组件（使用我的测试组件的组件）：

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”消息。

回调发生，我看到控制台消息，但没有显示“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