你可以使用指令
。
按如下方式尝试:
将以下代码放入单独的指令文件中(social-sharing.directive.ts):
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[socialSharing]'
})
export class SocialSharing {
constructor() { }
@HostListener('click') onClick() {
}
}
将其导入到 app.module.ts
文件并添加到 declarations
中。
在 HTML 中,只需将attribute
添加到任何元素中,该元素是指令文件中的selector
。
<button ion-button right socialSharing>
<ion-icon name="md-share"></ion-icon>
</button>
附加信息:
从组件向指令传递值。
home.html
<button ion-button right [socialSharing]="property">
<ion-icon name="md-share"></ion-icon>
</button>
home.component.ts
export class HomePage {
property: string = 'some url';
constructor() {}
}
social-sharing.directive.ts
从 @angular/core
导入 Input
以及其他内容。
import { Directive, Input, HostListener } from '@angular/core';
@Directive({
selector: '[socialSharing]'
})
export class SocialSharing {
@Input('socialSharing') str: string;
constructor() {}
@HostListener('click') onClick() {
console.log(this.str);
}
};
ngAfterInit() {
console.log(this.str);
};
}
在指令中使用Element:
social-sharing.directive.ts
从@angular/core
中导入ElementRef
以及其他内容。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[socialSharing]'
})
export class SocialSharing {
constructor(el: ElementRef) {};
ngOnInit() {
let elRef = this.el.nativeElement;
console.log(elRef.innerHTML);
};
}