Typescript 如何访问Angular2中的指令修改的组件?
让我们假设一种假设情况。您和我有一个由选择器Typescript 如何访问Angular2中的指令修改的组件?,typescript,angular2-directives,Typescript,Angular2 Directives,让我们假设一种假设情况。您和我有一个由选择器a-component标识的组件(名为a-component),以及一个由选择器[修改]标识的指令 在另一个组件的定义文件中,我们使用以下模板,该模板结合了我们的组件和修改组件的指令: <a-component is-modified></a-component> 我尝试使用注入来注入必要的组件,并将ElementRef更改为ComponentRef;这导致错误,即没有为ComponentRef指定提供程序。然后我尝试将组件注
a-component
标识的组件(名为a-component),以及一个由选择器[修改]
标识的指令
在另一个组件的定义文件中,我们使用以下模板,该模板结合了我们的组件和修改组件的指令:
<a-component is-modified></a-component>
我尝试使用注入来注入必要的组件,并将ElementRef
更改为ComponentRef
;这导致错误,即没有为ComponentRef指定提供程序。然后我尝试将组件注入组件,但这也产生了错误
文档明确指出“属性指令改变元素、组件或其他指令的外观或行为”,但我看不出该指令如何获得对其修改的组件的访问权
有人能提供帮助吗?答案如下:
通信的秘密是将服务注入构造函数。我扩展了组件和指令以使用相同的服务:
//The Component Definition (Psuedocode)
@Component(
{
...,
providers: [ AService ],
...
}
)
export class AComponent
{
constructor( commonService : AService )
{
let comp : AComponent = this;
commonService.serviceAnnouncement$.subscribe(
(msg)=>{
//msg can be anything we like, in my specific instance,
//I passed a reference to the directive instance
comp.doSomethingWithMsg( msg );
}
);
}
}
--
--
//服务定义(Psuedocode)
从'rxjs/Subject'导入{Subject};
@可注射(…)
导出类服务
{
私有源=新主题();
serviceAnnouncement$=this.source.toObservable();
宣布某事(msg:MsgType)
{
this.source.next(msg);
}
}
上述类存在于它们自己的文件中。导入和其他代码大多被省略,以避免显示混乱。它们的关键是对象可以将自身的实例传递给侦听共享服务的其他对象。文档表明@Component decorator的providers
属性可能会建立一个由该组件及其子代共享的唯一提供者;我还没有测试这个隐含的特性
如果您正在阅读本文,请务必注意,上面使用的通信(指令将自身传递给组件)仅适用于我的特定情况,并且在对象之间传递的消息应特定于您的实现
//The Component Definition (Psuedocode)
@Component(
{
...,
providers: [ AService ],
...
}
)
export class AComponent
{
constructor( commonService : AService )
{
let comp : AComponent = this;
commonService.serviceAnnouncement$.subscribe(
(msg)=>{
//msg can be anything we like, in my specific instance,
//I passed a reference to the directive instance
comp.doSomethingWithMsg( msg );
}
);
}
}
//The Directive Definition (Psuedocode)
@Directive(...)
export class IsModifiedDirective
{
constructor( commonService : AService )
{
commonService.announceSomething( this );
}
}
//The Service Definition (Psuedocode)
import { Subject } from 'rxjs/Subject';
@Injectable(...)
export class AService
{
private source = new Subject<MsgType>();
serviceAnnouncement$ = this.source.toObservable();
announceSomething( msg : MsgType )
{
this.source.next( msg );
}
}