尝试使用angular2组件中的exportAs

Question

是为组件定义的exportAs属性。 如何访问该组件的外部方法？ 我试过了这个例子

<my-app #my="myApp"> 
loading... 
</my-app> 


<button (click)="my.displayMessage()" class="ui button"> 
    Display popup for message element 
</button> 

这里组件类

import {Component} from 'angular2/core' 

@Component({ 
selector: 'my-app', 
providers: [], 
template: ` 
    <div> 
    <h2>Hello {{name}}</h2> 

    </div> 
    `, 
    directives: [], 
    exportAs: "myApp" 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 

    displayMessage():void { 
    console.log('called from component') 
    } 
} 

Answer 1

这是不应该的工作。您的根组件（App）的模板之外不能有任何#xxx，(xxx)或任何其他类型的Angular绑定。

你可能会寻找类似How to dynamically create bootstrap modals as Angular2 components?

Answer 2

EXPORTAS用于指示，请参阅：http://plnkr.co/edit/IlLtBY7Ic9yKiRIpjukf?p=preview

@Directive({ 
    selector: "div", 
    exportAs: "myDiv" 
}) 
class MyDiv { 

    constructor(private element: ElementRef, private renderer: Renderer) { 
    } 

    toUpper() { 
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "uppercase"); 
    } 

    toLower() { 
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "lowercase"); 
    } 

    reset() { 
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", ""); 
    } 
}