通知コンポーネントの角アプリケーションへの追加
14128 ワード
導入
Angular ウェブ、モバイル、デスクトップアプリケーションを構築するための開発プラットフォームです.現在、角度はバージョン13です、そして、Googleはプロジェクトの主な管理者です.
ngx-toastr 多くの設定オプションを持つ通知コンポーネントライブラリです.
必要条件
起動する前に、ツールをインストールして設定する必要があります.
起動する前に、ツールをインストールして設定する必要があります.
始める
角度アプリケーションの作成
1 .角度ベース構造を使用したアプリケーションの作成@angular/cli
ルートファイルとSCSSスタイル形式で.
ng new angular-toastr
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-toastr/README.md (1059 bytes)
CREATE angular-toastr/.editorconfig (274 bytes)
CREATE angular-toastr/.gitignore (604 bytes)
CREATE angular-toastr/angular.json (3255 bytes)
CREATE angular-toastr/package.json (1076 bytes)
CREATE angular-toastr/tsconfig.json (783 bytes)
CREATE angular-toastr/.browserslistrc (703 bytes)
CREATE angular-toastr/karma.conf.js (1431 bytes)
CREATE angular-toastr/tsconfig.app.json (287 bytes)
CREATE angular-toastr/tsconfig.spec.json (333 bytes)
CREATE angular-toastr/src/favicon.ico (948 bytes)
CREATE angular-toastr/src/index.html (299 bytes)
CREATE angular-toastr/src/main.ts (372 bytes)
CREATE angular-toastr/src/polyfills.ts (2820 bytes)
CREATE angular-toastr/src/styles.scss (80 bytes)
CREATE angular-toastr/src/test.ts (788 bytes)
CREATE angular-toastr/src/assets/.gitkeep (0 bytes)
CREATE angular-toastr/src/environments/environment.prod.ts (51 bytes)
CREATE angular-toastr/src/environments/environment.ts (658 bytes)
CREATE angular-toastr/src/app/app-routing.module.ts (245 bytes)
CREATE angular-toastr/src/app/app.module.ts (393 bytes)
CREATE angular-toastr/src/app/app.component.scss (0 bytes)
CREATE angular-toastr/src/app/app.component.html (24617 bytes)
CREATE angular-toastr/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-toastr/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
2 .ブートストラップCSSフレームワークのインストールと設定.ポストのステップ2と3をしてください.
インストールngx-toastr
図書館.
npm install ngx-toastr
4 .設定ngx-toastr
図書館.変更するangular.json
ファイルを追加toastr.css
下記のファイル.
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/ngx-toastr/toastr.css",
"src/styles.scss"
],
インポートBrowserAnimationsModule
and ToastrModule
モジュール変更するapp.module.ts
ファイルを追加し、以下の行を追加します.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 150000, // 15 seconds
closeButton: true,
progressBar: true,
}),
AppRoutingModule,
],
6 .内容を削除するAppComponent
からのクラスsrc/app/app.component.ts
ファイル.インポートToastrService
サービスと作成showSuccess
, showInfo
, showWarning
and showError
以下のメソッド.
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private toastrService: ToastrService) {
}
public showSuccess(): void {
this.toastrService.success('Message Success!', 'Title Success!');
}
public showInfo(): void {
this.toastrService.info('Message Info!', 'Title Info!');
}
public showWarning(): void {
this.toastrService.warning('Message Warning!', 'Title Warning!');
}
public showError(): void {
this.toastrService.error('Message Error!', 'Title Error!');
}
}
7 .内容を削除するsrc/app/app.component.html
ファイル.ボタンを下に追加します.
<div class="container-fluid py-3">
<h1>Angular Toastr</h1>
<div class="d-grid gap-2 col-4 mx-auto">
<button type="button" class="btn btn-sm btn-success" (click)="showSuccess()">Success</button>
<button type="button" class="btn btn-sm btn-info" (click)="showInfo()">Info</button>
<button type="button" class="btn btn-sm btn-warning" (click)="showWarning()">Warning</button>
<button type="button" class="btn btn-sm btn-danger" (click)="showError()">Error</button>
</div>
</div>
8 .下のコマンドでアプリケーションを実行します.
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.70 MB
styles.css | styles | 273.40 kB
polyfills.js | polyfills | 128.51 kB
scripts.js | scripts | 76.67 kB
main.js | main | 12.35 kB
runtime.js | runtime | 6.63 kB
| Initial Total | 3.19 MB
Build at: 2021-08-14T12:47:44.417Z - Hash: f001123d671f4d692c5a - Time: 11454ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
9 .準備完了!URLにアクセスするhttp://localhost:4200/
そして、アプリケーションが動作しているかどうかを確認します.アプリケーションの作業GitHub Pages and Stackblitz .
アプリケーションリポジトリはhttps://github.com/rodrigokamada/angular-toastr .
このチュートリアルはblog ポルトガル語.
Reference
この問題について(通知コンポーネントの角アプリケーションへの追加), 我々は、より多くの情報をここで見つけました
https://dev.to/rodrigokamada/adding-the-notification-component-to-an-angular-application-28m5
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
ng new angular-toastr
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-toastr/README.md (1059 bytes)
CREATE angular-toastr/.editorconfig (274 bytes)
CREATE angular-toastr/.gitignore (604 bytes)
CREATE angular-toastr/angular.json (3255 bytes)
CREATE angular-toastr/package.json (1076 bytes)
CREATE angular-toastr/tsconfig.json (783 bytes)
CREATE angular-toastr/.browserslistrc (703 bytes)
CREATE angular-toastr/karma.conf.js (1431 bytes)
CREATE angular-toastr/tsconfig.app.json (287 bytes)
CREATE angular-toastr/tsconfig.spec.json (333 bytes)
CREATE angular-toastr/src/favicon.ico (948 bytes)
CREATE angular-toastr/src/index.html (299 bytes)
CREATE angular-toastr/src/main.ts (372 bytes)
CREATE angular-toastr/src/polyfills.ts (2820 bytes)
CREATE angular-toastr/src/styles.scss (80 bytes)
CREATE angular-toastr/src/test.ts (788 bytes)
CREATE angular-toastr/src/assets/.gitkeep (0 bytes)
CREATE angular-toastr/src/environments/environment.prod.ts (51 bytes)
CREATE angular-toastr/src/environments/environment.ts (658 bytes)
CREATE angular-toastr/src/app/app-routing.module.ts (245 bytes)
CREATE angular-toastr/src/app/app.module.ts (393 bytes)
CREATE angular-toastr/src/app/app.component.scss (0 bytes)
CREATE angular-toastr/src/app/app.component.html (24617 bytes)
CREATE angular-toastr/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-toastr/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
npm install ngx-toastr
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/ngx-toastr/toastr.css",
"src/styles.scss"
],
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 150000, // 15 seconds
closeButton: true,
progressBar: true,
}),
AppRoutingModule,
],
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private toastrService: ToastrService) {
}
public showSuccess(): void {
this.toastrService.success('Message Success!', 'Title Success!');
}
public showInfo(): void {
this.toastrService.info('Message Info!', 'Title Info!');
}
public showWarning(): void {
this.toastrService.warning('Message Warning!', 'Title Warning!');
}
public showError(): void {
this.toastrService.error('Message Error!', 'Title Error!');
}
}
<div class="container-fluid py-3">
<h1>Angular Toastr</h1>
<div class="d-grid gap-2 col-4 mx-auto">
<button type="button" class="btn btn-sm btn-success" (click)="showSuccess()">Success</button>
<button type="button" class="btn btn-sm btn-info" (click)="showInfo()">Info</button>
<button type="button" class="btn btn-sm btn-warning" (click)="showWarning()">Warning</button>
<button type="button" class="btn btn-sm btn-danger" (click)="showError()">Error</button>
</div>
</div>
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.70 MB
styles.css | styles | 273.40 kB
polyfills.js | polyfills | 128.51 kB
scripts.js | scripts | 76.67 kB
main.js | main | 12.35 kB
runtime.js | runtime | 6.63 kB
| Initial Total | 3.19 MB
Build at: 2021-08-14T12:47:44.417Z - Hash: f001123d671f4d692c5a - Time: 11454ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
Reference
この問題について(通知コンポーネントの角アプリケーションへの追加), 我々は、より多くの情報をここで見つけました https://dev.to/rodrigokamada/adding-the-notification-component-to-an-angular-application-28m5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol