[英]Show notification then after 5 seconds navigation to other page
I want to create a notification.我想创建一个通知。 After 5 seconds the notification should vanish then it goes to another page. 5 秒后,通知应该消失,然后转到另一个页面。
export class AppComponent {
name = 'Angular 5';
constructor(private router: Router) {
var notify = new Notification('', {body: 'test'});
setTimeout(notify.close.bind(notify), 5000);
this.router.navigate(['/page1']);
}
}
However it navigates to the other page immediately;但是它会立即导航到另一个页面; I can't see the notification.我看不到通知。
export class AppComponent {
name = 'Angular 5';
constructor(private router: Router) {
var notify = new Notification('', {body: 'test'});
setTimeout(()=> {
notify.close.bind(notify);
this.router.navigate(['/page1']);
}, 5000);
}
}
From what I understood, you want to show the notification and on close of it redirect to a different page.据我了解,您希望显示通知并在关闭时重定向到不同的页面。
Try this:尝试这个:
export class AppComponent {
name = 'Angular 5';
constructor(private router: Router) {
var notify = new Notification('', {body: 'This is a notification'});
notify.onclose = (
() => {
setTimeout(() => {
this.router.navigate(['/page1']);
}, 5000);
}
);
}
}
Stackblitz Editor: https://stackblitz.com/edit/routing-example-x8hbhm Stackblitz 编辑器: https://stackblitz.com/edit/routing-example-x8hbhm
Stackblitz App url: https://routing-example-x8hbhm.stackblitz.io Stackblitz 应用程序 url: https://routing-example-x8hbhm.stackblitz.io
You also might want to check if the notification permission was granted or not.您可能还想检查是否授予了通知权限。
Example from https://developer.mozilla.org/en-US/docs/Web/API/notification示例来自https://developer.mozilla.org/en-US/docs/Web/API/notification
if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.