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

这不应该奏效。您不能在根组件（#xxx）的模板之外添加任何(xxx)，App或任何其他类型的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", "");
  }
}

Answer 3

exportAs被引入，并且可以从Angular 5中获得。

角2,4没有。这是指向Angular.io blog for Angular5

的链接

尝试在angular2组件中使用exportAs

3 个答案: