Question

我尝试从浏览器中调用后退箭头，以检测用户何时单击按钮。这很好，但是单击后我想转到某个组件。为此，我创建了这个。

export class BlogdetailComponent implements OnInit, OnDestroy {
  private sub: any;
  id: string;
  title: string;
  body: String;
  imageUrl: String;

  constructor(private route: ActivatedRoute, private router: Router,
    private _location: Location, location: PlatformLocation) {
    location.onPopState(() => {
      console.log('back clicked')
      this.router.navigateByUrl('/welcome');
    });
  }

  backClicked() {
    this._location.back();
  }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const blogtitle = params['blogtitle'];
      const blogbody = params['blogbody'];
      const image = params['imageUrl'];
      console.log('hure', image);
      this.imageUrl = image;
      this.title = blogtitle;
      this.body = blogbody;
    });
  }
}

问题在于它停留在同一组件上，并且仅接收与先前组件不同的参数。

Answer 1

我建议更改代码以使用CanDeactivate保护，而不要选中“后退”按钮。

您可以在此处查看警卫的信息：https://angular.io/guide/router

如果您仍然想使用流行音乐，Angular表示您不应该使用PlatformLocation，而改用Location。
（https://angular.io/api/common/PlatformLocation）

要使用该位置，您可以执行以下操作：

import { SubscriptionLike } from 'rxjs';

private subscription: SubscriptionLike;

 constructor(location: Location) {

    this.subscription = location.subscribe(() => {
      setTimeout(() => this.router.navigateByUrl('/welcome'), 20);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

由于应用程序的使用寿命长，您需要一个setTimeout。请注意，您还将有一个导航到上一个URL。如果要跳过，可以使用：this.router.navigateByUrl('/welcome', {replaceUrl:true})

此处的示例：

https://stackblitz.com/edit/angular-stack-55698013-routingonpop?file=src/app/hello.component.ts

角路由到上一个组件不起作用

1 个答案: