Ionic2 / Angular2 / TypeScript：如何访问函数2016中的DOM元素

发布时间：2020-12-17 07:30:36 所属栏目：安全来源：网络整理

导读：我似乎无法找到以正确的方式访问DOM元素的“正确”方法： Angular2 Ionic2 TypeScript. 所以鉴于以下情况…… 问)如何在sign()函数中访问sketchElement？ Settings.ts模板： button full class="top-button-margin" (click)="sign()" Sign ion-icon name="cr

我似乎无法找到以正确的方式访问DOM元素的“正确”方法：
Angular2 Ionic2 TypeScript.

所以鉴于以下情况……

问)如何在sign()函数中访问sketchElement？

Settings.ts模板：

<button full class="top-button-margin" (click)="sign()">
  Sign
  <ion-icon name="create"></ion-icon>
</button>
<img id="sketchElement" src="img/logo.png" padding *ngIf="showSignatureView">

我的settings.ts类：

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {

  private currentUser: User = <User>{};
  private loggingOut: boolean = false;
  private currentConnection: string = "";
  private showSignatureView: boolean = false;

  constructor(
    private _platform: Platform,private _nav: NavController,private _events: Events,private _LoginService: LoginService,private _SessionService: SessionService,private _UIService: UIService) {

  }

  sign() {
    // I want to access sketchElement and its properties here.      
  }
}

您可以使用ViewChild装饰器.首先添加：

<img id="sketchElement"
     #sketchElement
     src="img/logo.png" padding *ngIf="showSignatureView">

并在您的组件中,添加相应的属性：

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {
  @ViewChild('sketchElement')
  sketchElement:ElementRef;

  ngAfterViewInit() {
    // sketchElement is usable
  }
}

看到这个plunkr：http://plnkr.co/edit/0TV3ppA0Gpwr5CjOWlAu?p=preview.

这个问题也可以帮到你：

> Calling a function in a child Angular2 Component?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!