Вступление
В этой статье мы узнаем, как копировать текст в наш буфер обмена, а также копировать текущую дату и время, используя Angular 8.
Javascript предоставляет очень хорошую функцию для копирования любого текста в буфер обмена и может вставить его в любом месте. Поэтому в этой статье мы скопируем некоторый текст и текущую дату и время в наш буфер обмена и вставим его в textarea.
Предпосылки
- Базовые знания по Angular.
- Код Visual Studio должен быть установлен.
- Угловой CLI должен быть установлен.
- Узел JS должен быть установлен.
Шаг 1
Давайте создадим проект Angular, используя следующую команду npm.
Машинопись
xxxxxxxxxx
1
ng new CopyToClipboard
Шаг 2
Откройте недавно созданный проект в коде Visual Studio и установите загрузчик в этом проекте.
Машинопись
xxxxxxxxxx
1
npm install bootstrap --save
Теперь откройте файл styles.css и добавьте ссылку на файл Bootstrap. Чтобы добавить ссылку в файл styles.css, добавьте эту строку:
Машинопись
xxxxxxxxxx
1
@import '~bootstrap/dist/css/bootstrap.min.css';
Шаг 3
Теперь давайте создадим новый компонент с помощью следующей команды:
Машинопись
xxxxxxxxxx
1
ng g c copy-clipboard
Шаг 4
Теперь откройте файл copy-clipboard.component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
<div class="card">
2
<div class="card-body pb-0">
3
<div class="row">
4
<div class="col-12 col-md-12">
5
<div class="card">
6
7
<div class="card-header">
8
<label>Copy Text To Clipboard </label>
9
10
</div>
11
<div>
12
<textarea readonly style="margin-left: 317px;text-align: center;" #date>{{todaysDate | date:'dd/MM/yyyy'}}</textarea>
13
<textarea readonly style="margin-left: 317px; text-align: center;" #time>{{todaysDate | date:'HH:mm:ss'}}</textarea>
14
</div>
15
<div class="card-body">
16
<div class="center-form">
17
<div class="row">
18
19
<div class="col-6 col-md-6">
20
<div class="form-group">
21
<h5>Type To Copy</h5>
22
23
<textarea #userinput placeholder="Enter text to be copied"
24
style="height: 167px!important;width: 500px;"></textarea>
25
</div>
26
</div>
27
<div class="col-6 col-md-6">
28
<div class="form-group">
29
<h5>Paste</h5>
30
<textarea placeholder="Paste copied text" style="height: 167px!important;width: 500px;"></textarea>
31
</div>
32
</div>
33
<div class="col-12 col-md-12 text-center">
34
35
<button type="button" style="margin-right:5px" (click)="copyInputMessage(userinput)"
36
class="btn btn-primary">Copy to
37
Clipboard</button>
38
<button type="button" style="margin-right:5px" (click)="copyTodaysDate(date)"
39
class="btn btn-danger">Copy
40
Today's Date</button>
41
<button type="button" style="margin-right:5px" (click)="copyCurrentTime(time)"
42
class="btn btn-success">Copy
43
Current Time</button>
44
<label *ngIf="msgHideAndShow" style="float: right;">{{textMessage}}</label>
45
</div>
46
47
</div>
48
</div>
49
</div>
50
51
</div>
52
</div>
53
</div>
54
</div>
55
</div>
Шаг 5
Теперь откройте файл copy-clipboard.component.ts и добавьте следующий код:
Машинопись
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
3
@Component({
4
selector: 'app-copy-clipboard',
5
templateUrl: './copy-clipboard.component.html',
6
styleUrls: ['./copy-clipboard.component.css']
7
})
8
export class CopyClipboardComponent implements OnInit {
9
todaysDate: Date = new Date();
10
textMessage:any;
11
msgHideAndShow:boolean=false;
12
constructor() {
13
setInterval(() => {
14
this.todaysDate = new Date();
15
}, 1);
16
}
17
18
ngOnInit() {
19
console.log(this.todaysDate);
20
21
}
22
// Text Message
23
textMessageFunc(msgText){
24
this.textMessage=msgText+" Copied to Clipboard";
25
this.msgHideAndShow=true;
26
setTimeout(() => {
27
this.textMessage="";
28
this.msgHideAndShow=false;
29
}, 1000);
30
31
}
32
/* To copy Text from Textbox */
33
copyInputMessage(inputElement) {
34
inputElement.select();
35
document.execCommand('copy');
36
inputElement.setSelectionRange(0, 0);
37
this.textMessageFunc('Text');
38
39
}
40
41
copyTodaysDate(date) {
42
date.select();
43
document.execCommand('copy');
44
date.setSelectionRange(0, 0);
45
this.textMessageFunc('Date');
46
}
47
48
copyCurrentTime(time) {
49
time.select();
50
document.execCommand('copy');
51
time.setSelectionRange(0, 0);
52
this.textMessageFunc('Time');
53
}
54
}
Шаг 6
Теперь откройте файл app.module.ts и добавьте следующий код в этот файл.
Машинопись
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
import { FormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5
import { HttpClientModule } from '@angular/common/http';
6
import { CopyClipboardComponent } from './copy-clipboard/copy-clipboard.component';
7
8
@NgModule({
9
declarations: [
10
AppComponent,
11
CopyClipboardComponent
12
],
13
imports: [
14
BrowserModule,
15
HttpClientModule,
16
FormsModule
17
],
18
providers: [],
19
bootstrap: [AppComponent]
20
})
21
export class AppModule { }
Шаг 7
Давайте скопируем приведенный ниже код и вставим его в app.component.html .
HTML
xxxxxxxxxx
1
<app-copy-clipboard></app-copy-clipboard>
Шаг 8
Теперь давайте запустим проект с помощью команды npm startили ng serveи проверим вывод.
Резюме
В этой статье я обсудил, как мы можем скопировать любой текст в буфер обмена и вставить не только текст, но также текущую дату и время в приложениях Angular 8.
Пожалуйста, дайте ваши ценные отзывы / комментарии / вопросы по этой статье. Пожалуйста, дайте мне знать, если вам понравилась и поняла эту статью и как я могу улучшить ее.