尝试在 angular2 组件中使用 exportAs

Question

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

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


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

这里是组件 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

那是行不通的。在根组件 (App).

的模板之外不能有任何 #xxx、(xxx) 或任何其他类型的 Angular 绑定

您可能正在寻找类似

的内容

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", "");
  }
}

Answer 3

exportAs 被引入，并且从 Angular 5.

开始可用

Angular 2,4 没有。这里是 link 到 Angular.io blog for Angular5

尝试在 angular2 组件中使用 exportAs

try to use exportAs in angular2 component

angular2-template

angular