Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typo3/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Typescript 如何访问Angular2中的指令修改的组件?_Typescript_Angular2 Directives - Fatal编程技术网

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