文章内容
2024/5/16 19:05:53,作 者: 黄兵
Angular 复制相关功能
这是一个 Angular 表单，现在需要实现复制 IP 地址的功能：
<mat-form-field appearance="fill" class="col-lg-6">
<mat-label>IP</mat-label>
<input matInput [(ngModel)]="accessLogModel.ip" maxlength="39" readonly required>
<button mat-button matSuffix mat-icon-button aria-label="content_copy" [matTooltip]="'复制 IP 地址'">
<mat-icon>content_copy</mat-icon>
</button>
</mat-form-field>
我们可以修改如下代码：
<mat-form-field appearance="fill" class="col-lg-6">
<mat-label>IP</mat-label>
<input matInput [(ngModel)]="accessLogModel.ip" maxlength="39" readonly required>
<button mat-button matSuffix mat-icon-button aria-label="content_copy" [matTooltip]="'复制 IP 地址'" [cdkCopyToClipboard]="accessLogModel.ip">
<mat-icon>content_copy</mat-icon>
</button>
</mat-form-field>
cdkCopyToClipboard 指令可以轻松地为现有元素添加点击复制功能。该指令选择器同时也是用于指定要复制文本的 @Input() 属性。
参考资料：
1、Angular - Click an element to copy
其它相关推荐：
1、angular robots.txt sitemap.xml
评论列表