嘗試使用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", ""); 
    } 
}