Question

我的应用程序中有一个引导程序模式，并且希望在打开时显示在浏览历史记录中，因此，当用户单击浏览器的后退按钮时，该模式将关闭。

我熟悉Angular的{ "message": "success", "data": [ { "id": 1, "title": "SIPHON", "description": "Siphon coffee was invented in the 1840s more or less simultaneously by a French housewife and Scottish marine engineer. It’s been refined many times, but a few principles hold true: It produces a delicate, tea-like cup of coffee; it can be quite persnickety; and it is, for our money, one of the coolest brew methods available.\r\nSumber : <a title=\"https://bluebottlecoffee.com/preparation-guides/siphon\" href=\"https://bluebottlecoffee.com/preparation-guides/siphon\" target=\"_blank\" rel=\"noopener\">https://bluebottlecoffee.com/preparation-guides/siphon</a>", "slug": "siphon", "image": "4cf25879ab69702dbe12c244f233f5b4_1551366184.jpg", "time": "{\"time1\":\"2\",\"time2\":\"3\",\"unit\":\"minute\"}", "temperature": "{\"temperature\":\"195\",\"unit\":\"\\u00b0F\"}", "ingredients": "[{\"name\":\"Coffee\",\"amount\":\"25\",\"unit\":\"gr\"},{\"name\":\"Hot Water\",\"amount\":\"300\",\"unit\":\"ml\"}]", "tools": "[{\"name\":\"Grinder\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Scale\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Siphon set\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Thermometer\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Timer\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Bamboo paddle\",\"amount\":\"1\",\"unit\":\"unit\"}]", "steps": "[\"After soaking your filter in a warm water bath for at least five minutes, drop it into the bottom of your siphon\\u2019s top component, or \\u201chopper,\\u201d and hook to the bottom of the hopper\\u2019s glass tubing.\",\"Fill your siphon\\u2019s bottom component, or \\u201cbulb,\\u201d with 300 grams of hot water (about a 12-oz. cup\\u2019s worth).\",\"Insert the hopper, filter and all, into the bulb. You don't have to press too hard; just make sure it's securely and evenly in place. Position the entire assembly above your heat source.\",\"While the water is heating, measure out between 20-25 grams of coffee and grind it just little bit finer than you would for regular drip coffee.\",\"Soon, the water in the bulb will begin boiling and rise up into the hopper. For some physics-related reason we don\\u2019t fully understand, a little bit will stay in the bottom. Don\\u2019t worry about this little bit.\",\"Once the water has moved into the hopper, turn your heat source down so that the water is between 185-195 degrees F.\",\"Add your coffee, and gently (but thoroughly) submerge it with a bamboo paddle or butter knife.\",\"Let the coffee brew, undisturbed, for one minute and 10 seconds.\",\"In one brisk motion, remove your siphon from its heat source and give it ten stirs with a bamboo paddle.\",\"Your coffee should take another minute or so to draw downward and finally rest in the bulb. You'll know it's ready when a dome of grounds has formed at the top of the filter, and when the coffee at the bottom has begun to bubble at approximately the pace and strength of a kitten\\u2019s heartbeat.\\r\\n\\r\\nRemove the hopper and serve. In order to guarantee the most complex cup, give the coffee a few minutes to cool.\"]", "step_images": "[\"4cf25879ab69702dbe12c244f233f5b4_11551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_21551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_31551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_41551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_51551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_61551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_71551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_81551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_91551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_101551366184.jpg\"]", "user_id": 1, "status_id": 1, "shared_id": 1, "created_at": "2019-02-28 15:03:04", "updated_at": "2019-02-28 15:03:04", "deleted_at": null } ] }对象，所以Location和Location.back() works fine for my scenario。

问题是-用户单击后退按钮后，我想从浏览器历史记录中弹出顶部路径，因此在关闭模式后-用户无法使用浏览器的“下一步”按钮重新打开它。 / p>

通过Angular的Router / Location /其他类似Angular的方式来实现这一目标的任何方法？

Answer 1

这就是我用来实现这一目标的方法。每当用户单击标题为“发布”的标题组件按钮时，都会显示一个模式对话框。当用户单击后退按钮时，它将带用户到上一条路线。这是我处理对话框打开的服务。

`import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { PostItDialog } from './post-it-dialog.component';
import { Location } from '@angular/common';
import { MatDialog } from '@angular/material/dialog';`

    `public openPostItDialog(dialog: MatDialog): void {
        const dialogRef = dialog.open(PostItDialog, {
          width: '350px'
        });
        const url = this.router.createUrlTree(['posts/new']).toString();
        this.location.go(url);
        console.log("Dialog was open");

        dialogRef.afterClosed().subscribe(() => {
          console.log("The dialog was closed");
          this.location.go("");
        })`

Angular 7 Router-有没有办法弹出顶部路由？

1 个答案: