Question

让我们假设一个假设的情况。您和我有一个由选择器a-component标识的组件（名为 AComponent ），以及由选择器[is-modified]标识的指令。

在另一个组件的定义文件中，我们使用以下模板，该模板结合了我们的组件和我们的指令，它修改了组件：

<a-component is-modified></a-component>

documentation for a attribute Directive表示构造函数赋予指令访问 ElementRef ，但没有 ElementRef 与组件父母。

export class IsModifiedDirective { constructor( elementReference : ElementRef ) { console.log( elementReference ); //no connection appears to exist between elementReference and the component //also: ElementRef has security risks, so it should be avoided. debugger; } }

我尝试使用注入来注入必要的组件，并将ElementRef更改为ComponentRef<AComponent>;这给出了错误，即没有为 ComponentRef 指定提供程序。然后我尝试注入组件AComponent，但也产生了错误。

文档清楚地表明＆＃34;属性指令 - 改变元素，组件或其他指令的外观或行为。＆＃34;，但我看不到指令如何获取对其修改的组件的访问权限。

任何人都可以提供帮助吗？

Answer 1

答案在这里找到：Component Interactions

沟通的秘诀在于向构造者注入服务。我扩展了组件和指令以使用相同的服务：

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

上述类存在于自己的文件中。导入和其他代码大多被遗漏，以避免显示混乱。关键是对象可以将自己的实例传递给侦听共享服务的其他对象。文档建议@Component装饰器的providers属性可以建立该组件及其后代共享的唯一提供者;我没有测试过这个隐含的功能。

如果您正在阅读本文，请务必注意上面使用的通信（指令将自身传递给组件）仅适用于我的特定情况，并且在对象之间传递的消息应特定于您的实施

如何访问Angular2中由指令修改的组件？

1 个答案: