원래 Toastr 각도 5?

Question

원래 Toastr b/c가 마음에 듭니다. "Item X Saved"메시지가 튀어 나와 홈 페이지로 다시 리디렉션 된 후 X 밀리 초 동안 페이지에 남아 있습니다. 그래서 저는 원래의 toastr 라이브러리 인 Angular 5를 사용하고 싶습니다. 알아낼 수 없습니다. 이것을 보여주는 블로그 게시물이나 온라인 샘플이 있습니까?

참고 : angular2-toaster 및 기타 몇 가지와 같은 npm 패키지가 있다는 것을 알고 있지만 Angular 5 CLI를 사용하여 설치하고 실행하려고하면 수많은 오류 메시지가 표시되며 Github 페이지를 보면 뛰어난 이슈가 있었고 Ag5는 소스 코드를 분석하고 해킹하지 않고 (아직 익숙하지 않은 전문가) 분명히 아직 작동하지 않는 충분한 변경 사항이있는 것으로 보입니다. Ag4와 함께 작동하지만 Ag5에서는 작동하지 않는 것 같습니다.

toastr은 표준 JS 라이브러리이므로 angluar-cli.json "scripts"의 min.js 파일에 링크를 추가하고 SPA 이전의 좋은 예와 같은 표준 팝업을 표시 할 수없는 이유는 무엇입니까? 내가 다운로드하고 많은 npm 라이브러리와 오늘 밤 싸우는 것은 그것이 수년간 주변에 있었던 표준 라이브러리를 사용해야하는 것보다 훨씬 더 어려웠던 것처럼 보인다.

감사합니다.

Answer 1

이렇게하려면 Angular Material을 적극적으로 권합니다. 당신이 (이 각도 (5)와 함께 작동 및 설치 절차를 수행하는 것은 매우 쉽습니다)을 설치 한 후

, 모두 당신이 필요 당신이이 링크를 확인하고 명령이 따를 수 toastr에 대한

private constructor(private snacker: MatSnackBar) {} 
// ... 
toast() { this.snacker.open('Text to display', 'Button text', { duration: 2000 }); } 

Answer 2

1 설치 NPM의 packa : 각 5 각 5

https://www.primefaces.org/primeng/#/growl 

에 대한 지원하면 외부 CDN 또는 링크

방법을 사용할 수 있습니다

"../node_modules/...../toastr.min.js 

설치된 노드 모듈에서 스크립트 배열 가져 오기 스크립트 .angular-cli.json 파일의 toastr

npm install --save toastr 

에 대한 GE와 스타일 배열에 CSS 파일 가져

"../node_modules/...../toastr.min.css 

이것이 작동하지 않으면 index.html 파일에 CDN을 포함하십시오.

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>  
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" /> 

및 구성 요소의은 아래와 같이 변수를 선언하고 응답 https://github.com/CodeSeven/toastr

declare var toastr;