Angular:将服务从自定义元素传递给子自定义元素

Question

我已经构建了一个演示，它创建了2个自定义角度元素(checkout app.module(。工作起来很有魅力，但有一个问题，如果我在父元素(称为BarComponent(中提供服务，它的子CE(称为TestComponent(不会接收到它

@Component({
templateUrl: './bar-ce.component.html',
providers: [TestService] // <-- this one!!
})
export class BarComponent {}

在其html中，它呈现子CE:TEST-CE: <test-ce></test-ce>

如果我尝试以这种方式注入我的TestService；NullInjectorError:没有TestService的提供程序">

但如果我在app.module中提供它，它就会再次工作。所以我的问题是，有没有办法解决这个问题，或者这只是行政长官的做法(希望没有(？

Answer 1

您应该根据您的演示来解决这样做的问题。

TEST-CE: <test-ce [testService]="testService"></test-ce>

然后在你的子组件上这样做。

import { Component, Input, OnInit } from '@angular/core';
import { TestService } from '../test.service';
@Component({
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
@Input() testService: TestService
numInput: number;
constructor() { 
console.log('test-ce constructor.');
}
ngOnInit() {
this.numInput = this.testService.value;
}
}

Answer 2

应该在模块中提供共享服务。并且latar在构造函数(private testService:testService(中初始化