Question

Angular2文档仅涉及创建新应用程序，但没有使用angular2将隔离组件添加到现有网站。它不是重写完整网站的选项。所以我想创建一个简单的角度组件，例如像这样的东西。

const template = `
    <button (click)="triggerEvent()">Trigger Event</button>
`;

@Component({
    template,
    selector: "poc-comp"
})
export class PocComponent {
    @Output() pocevent: EventEmitter<any>;
    public triggerEvent() {
        this.pocevent.emit("here we go!");
    }
}

然后我有一个包含内部组件的hugh网页。

<lot-of-html>
<poc-comp (pocevent)="handlerOutsideAngular()"></poc-comp>
<lot-of-other-html>

这就是我认为我的工作但并非如此。事件只能由角度组件捕获。我的下一个想法是，使用ElementRef并使用dispatchEvent，但看起来ElementRef只提供了一个＆＃34;破坏＆＃34;和无类型的HTMLElement。

问题是，是否有可能使用angular来创建某些与非角度Web应用程序一起工作的WebComponents？将数据插入组件很简单，但我希望从组件中获取一些东西。

Answer 1

只需更改

  @Output() pocevent: EventEmitter<any>;

到

  @Output() pocevent: EventEmitter<any> = new EventEmitter<any>();

然后，

<lot-of-html>
    <poc-comp (pocevent)="handlerOutsideAngular($event)"></poc-comp>   //<<<===added $event
<lot-of-other-html>


handlerOutsideAngular(value){
   console.log(value)   //here we go!
}

我不确定

@Component({
    template,                        <<<====This line I don't know
    selector: "poc-comp"
})

收听Angular2组件事件

1 个答案: