如何将提供者注入组件？

Question

如何在Angular2中将提供者注入容器组件？

比如我有父组件：

@Component({ 
    selector: 'myForm', 
    template: '<form><myForm-detail></myForm-detail></form>', 
    directives: [ MyFormDetailComponent ] 
}) 
export class MyFormComponent { 
    ... 
} 

和集装箱组件：

@Component({ 
    selector: 'myForm-detail', 
    template: '<input type="text">', 
    providers: [ MyService ] 
}) 
export class MyFormDetailComponent { 
    constructor(s: MyService) { 
     console.log(s); // return "undefined" 
    } 

    ... 
} 

如何注入到为MyService MyFormDetailComponent？

Answer 1

如果要将相同的服务注入到两个组件中，只需将MyService定义为父组件的providers属性即可。这样，（因为分层喷射器），你将能够把它注入到这两个组件：

@Component({ 
    selector: 'myForm', 
    template: '<form><myForm-detail></myForm-detail></form>', 
    directives: [ MyFormDetailComponent ], 
    providers: [ MyService ] 
}) 
export class MyFormComponent { 
    constructor(s: MyService) { 
    } 
    ... 
} 

(...) 

@Component({ 
    selector: 'myForm-detail', 
    template: '<input type="text">', 
}) 
export class MyFormDetailComponent { 
    constructor(s: MyService) { 
    console.log(s); 
    } 
} 

看到这个plunkr：https://plnkr.co/edit/rUBgioLtqIAfWNCkRnlN?p=preview。

如果你想知道更多关于分层喷射器，你可以看一下这个问题：

• What's the best way to inject one service into another in angular 2 (Beta)?