angular-material-app documentation
  1. Components
  2. NotificationComponent

File

src/app/materials/notification/notification.component.ts

Implements

OnInit

Metadata

selector app-notification
styleUrls ./notification.component.scss
templateUrl ./notification.component.html

Index

Properties
Methods

Constructor

constructor(_notification: NotificationService)
Defined in src/app/materials/notification/notification.component.ts:15
Parameters :
Name Type Optional
_notification NotificationService No

Methods

clear
clear()
Defined in src/app/materials/notification/notification.component.ts:39
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/materials/notification/notification.component.ts:20
Returns : void
show
show()
Defined in src/app/materials/notification/notification.component.ts:24
Returns : void
success
success()
Defined in src/app/materials/notification/notification.component.ts:31
Returns : void
warn
warn()
Defined in src/app/materials/notification/notification.component.ts:35
Returns : void

Properties

duration
Type : number
Default value : 3000
Defined in src/app/materials/notification/notification.component.ts:13
message
Type : string
Default value : '测试消息'
Defined in src/app/materials/notification/notification.component.ts:12
position
Type : any
Defined in src/app/materials/notification/notification.component.ts:14
title
Type : string
Default value : '测试标题'
Defined in src/app/materials/notification/notification.component.ts:11
type
Type : string
Defined in src/app/materials/notification/notification.component.ts:15
 
import { Component, OnInit } from '@angular/core';
import { NotificationService } from '../../component';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {

  title: string = '测试标题';
  message: string = '测试消息';
  duration: number = 3000;
  position: any;
  type: string;

  constructor(private _notification: NotificationService) {
  }

  ngOnInit() {
  }


  show() {
    console.log(this.position);
    this._notification.open(this.message, this.title, {
      duration: this.duration
    }, this.type);
  }

  success() {
    this._notification.success('测试消息', '测试标题');
  }

  warn() {
    this._notification.warn('测试消息', '测试标题');
  }

  clear() {
    this._notification.dismiss();
  }

}
Copy
<mat-card>
  <mat-card-title>Notification 通知</mat-card-title>
  <mat-card-content>

    <mat-form-field>
      <input matInput placeholder="Title" [(ngModel)]="title">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Message" [(ngModel)]="message">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Duration" [(ngModel)]="duration">
    </mat-form-field>

    <div class="m-20">
      <mat-radio-group [(ngModel)]="position">
        <mat-radio-button value="1">top right</mat-radio-button>
      </mat-radio-group>
    </div>

    <div class="m-20">
      <mat-radio-group [(ngModel)]="type">
        <mat-radio-button value="info">info</mat-radio-button>
        <mat-radio-button value="success">success</mat-radio-button>
        <mat-radio-button value="warn">warn</mat-radio-button>
      </mat-radio-group>
    </div>

  </mat-card-content>
  <mat-card-actions align="center">
    <button mat-raised-button color="primary" (click)="show()">显示</button>
    <button mat-raised-button (click)="clear()">清除</button>
  </mat-card-actions>
</mat-card>
Copy

./notification.component.scss 

:host {
  display: block;
}

mat-card {
  margin: 20px;
}

mat-form-field {
  display: block;
}

mat-radio-group {
  display: block;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""