尝试在 angular2 组件中使用 exportAs

Question

Is exportAs property defined for a component. How can I access outside the component to a method of it? I tried this example

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


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

Here the component class

 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

That is not supposed to work. You can't have any #xxx , (xxx) or any other kind of Angular binding outside the template of you root component ( App ).

You might be looking for something like How to dynamically create bootstrap modals as Angular2 components?

Answer 2

exportAs is used for directives, see: 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", "");
  }
}

Answer 3

exportAs was introduced, and has been available from Angular 5.

Angular 2,4 dont have it. Here is the link to Angular.io blog for Angular5