src/app/mail/compose/compose.component.ts
| selector | app-mail-compose |
| styleUrls | ./compose.component.scss |
| templateUrl | ./compose.component.html |
Properties |
Methods |
constructor(dialogRef: MatDialogRef
|
||||||
|
Defined in src/app/mail/compose/compose.component.ts:14
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/mail/compose/compose.component.ts:18
|
|
Returns :
void
|
| send |
send()
|
|
Defined in src/app/mail/compose/compose.component.ts:20
|
|
Returns :
void
|
| address |
Type : string
|
Default value : 'stbui@stbui.com'
|
|
Defined in src/app/mail/compose/compose.component.ts:12
|
| content |
Type : string
|
|
Defined in src/app/mail/compose/compose.component.ts:14
|
|
Defined in src/app/mail/compose/compose.component.ts:10
|
| name |
Type : string
|
|
Defined in src/app/mail/compose/compose.component.ts:11
|
| subject |
Type : string
|
|
Defined in src/app/mail/compose/compose.component.ts:13
|
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
selector: 'app-mail-compose',
templateUrl: './compose.component.html',
styleUrls: ['./compose.component.scss']
})
export class ComposeComponent implements OnInit {
mail;
name: string;
address: string = 'stbui@stbui.com';
subject: string;
content: string;
constructor(private dialogRef: MatDialogRef<ComposeComponent>) {}
ngOnInit() {}
send() {
this.mail = {
from: {
name: this.name,
mail: this.address
},
subject: this.subject,
content: this.content
};
console.log(this.mail, this.name, this.subject);
this.dialogRef.close(this.mail);
}
}
<div class="inbox-compose">
<div mat-dialog-content fxLayout="row" fxLayoutAlign="space-between center">
<span>写信</span>
<button mat-dialog-close mat-icon-button><mat-icon>close</mat-icon></button>
</div>
<form #mailForm="ngForm">
<div fxLayout="column" mat-dialog-content>
<mat-form-field class="display-block">
<input
matInput
placeholder="收件人"
name="name"
[(ngModel)]="name"
required
/>
</mat-form-field>
<mat-form-field class="display-block">
<input
matInput
placeholder="发件人"
disabled
name="address"
[(ngModel)]="address"
required
/>
</mat-form-field>
<mat-form-field class="display-block">
<input
matInput
placeholder="主题"
name="subject"
[(ngModel)]="subject"
required
/>
</mat-form-field>
<p class="editor">
<quill-editor name="content" [(ngModel)]="content"></quill-editor>
</p>
</div>
<div mat-dialog-actions fxLayout="row">
<button mat-dialog-close mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
<span fxFlex></span>
<button mat-icon-button><mat-icon>attachment</mat-icon></button>
<button
class="send"
mat-raised-button
color="primary"
[disabled]="!mailForm.valid"
(click)="send()"
>
发送 <mat-icon>send</mat-icon>
</button>
</div>
</form>
</div>
./compose.component.scss
.display-block {
display: block;
}