web-dev-qa-db-ja.com

ngx-toastr、ToastがAngular 7に表示されない

Angular 7.を使用してWebアプリを開発しています。ユーザーに通知を送信するためにngx-toastrを含めたかったのですが、期待どおりに機能していません。トーストをトリガーしても何も起こりません、トーストのサイズのボックスを除いて、右下隅に表示されますが、カーソルがホバーされた場合のみです。toastr関数をトリガーする方法の例に従ってください。テストは、ボタンをクリックすることで呼び出されます。

import {ToastrService} from 'ngx-toastr';
@Component({
  selector: 'app-action-controls',
  templateUrl: './action-controls.component.html',
  styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
  test(){   
          this.toast.success("I'm a toast!", "Success!");
  }
 constructor(private toast: ToastrService) { }
}

ライブラリのcssファイルをプロジェクトのangular.jsonファイルに次のように含めました。

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

そして、私のapp.module.tsファイルで次のように：

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

私が間違っていることを理解することができません、誰かが同じような経験をしましたか？よろしくお願いします！

angulartoastr
49
Marvin W.

私は再びこの問題に出くわしました。上記のリソースは、それは修正されたが私のためではなかったと述べました。 bootstrapとtoastrの両方の最新リソースを取得した後でも、多くの調査の結果、関連するtoastrアラートタイプの背景に「！important」を追加するだけでこれが解決されました。以下のコードを参照してください。

.toast-success{background-color:#51A351!important;}
.toast-error{background-color:#BD362F!important;}
.toast-info{background-color:#2F96B4!important;}
.toast-warning{background-color:#F89406!important;}

良い方法ではありませんが、コードに.min.cssファイルを追加しました。ただし、これらのファイルはAWS CloudFront CDNでホストするため、CDNを複製する必要はありません。

0
Douglas

私にとって、これらのソリューションはどれも役に立ちませんでした。最後に私がしたことは、これを本番構成用のAngular.jsonに設定することでした。

    "extractCss": false
0
Nadine