Angular2將組件注入其他組件

我正在搞Angular2，我希望能夠根據引導綁定將一個組件注入另一個組件。Angular2將組件注入其他組件

class HelloComponent { 
    name: string; 
} 

@Component({ 
    selector: 'hello' 
} 
@View({ 
    template: `<h3>Hello {{ name }}</h3>` 
}) 
class HelloBobComponent extends HelloComponent { 
    constructor() { 
     this.name = 'Bob'; 
    } 
} 

@Component({ 
    selector: 'app' 
} 
@View({ 
    directives: [HelloComponent] 
    template: `<h1>Welcome to my Angular2 app</h1> 
       <hello></hello>` 
} 
class AppComponent { 
} 

bootstrap(AppComponent, [ 
    bind(HelloComponent).toClass(HelloBobComponent) 
]);

在這裏，我使用HelloComponent作爲令牌，我想Angular2的注入器來解析HelloBobComponent。我這樣做是爲了根據當前的應用程序配置，我可以交換組件。上面的例子顯然不起作用。這可能使用框架裝飾器之一嗎？我還沒有找到答案，但通過博客或來源挖掘。

編輯：爲了澄清，我如何獲得視圖裝飾器的指令屬性，將HelloComponent作爲di令牌而不是類型。

來源

2015-09-16 Stacy Gay

看看這個[answer]（https://gitter.im/angular/angular?at=55fabc7f6f976dff036eeb79）你的問題，有人在聊天室裏問。從那裏閱讀@ pkozlowski的回答。 –

謝謝你指點我這個方向。我修好了，發現我可以使用指令在組件中顯式綁定：[bind（HelloComponent）.toClass（HelloBobComponent）]。但是，這並不能幫助我，因爲我想從根注入器解析所以我不必擔心在各個組件中配置綁定。 –

從alpha37開始，目前不支持此功能。編譯器通過類型或綁定來解析在視圖裝飾器中傳遞的指令，但不從父注入器中查找。

例如：

@View({ 
    url: '...', 
    directives: [ 
    Directive1, 
    bind(Directive2).toClass(Directive2Impl), 
    ] 
})

的意向這裏的「指令」屬性，只是爲了防止選擇命名衝突。後來綁定支持被添加來幫助測試。

我可以想到的唯一解決方案是不用編輯編譯器功能就可以維護一個外部的Injector並解析組件聲明中的類型。

來源

2015-09-18 13:56:52

這將如何在RC4中工作？ – nottinhill

我在整個beta測試中都一直在努力。我確實有一些最初的運氣，重寫了取決於根注入器的DirectiveResolver來解析基於DirectiveMetadata的替代指令。一旦他們引入了ReflectveInjector，甚至進一步開始優化編譯器，這一點就被打破了。棺材中的釘子將與預編譯組件的視圖編譯器一起使用。我的解決方案是維護一個指令註冊表，它只是鍵/指令對的一個對象。指令：[registry.resolveDirective（someDirectiveToken）] –

Angular2將組件注入其他組件

回答

相關問題