【问题标题】:angular : reload page after redirection角度:重定向后重新加载页面
【发布时间】:2020-08-21 17:32:41
【问题描述】:

我有一个重定向到另一个页面的函数,我希望重定向后重定向的页面也重新加载。

我想在重定向到登录页面后重新加载它。 使用 'window.location.reload()' 重新加载当前页面,该页面是主页但不是登录页面。 如何重新加载特定页面?

homeComponent.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators, Form } from '@angular/forms';
import { LoginComponent } from '../authentification/login/login.component';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})



export class HomeComponent implements OnInit {
  
  ngOnInit(): void {
   
  }

  constructor(private router: Router) { }


   redirection(){
    this.router.navigate(['/login']);
   }

  
}

【问题讨论】:

    标签: javascript angular typescript angular-routing angular-router


    【解决方案1】:

    你为什么不使用

    redirection(){
       window.location.href="yourpagedomain/login"
     } 
    

    它将加载页面。

    【讨论】:

    • 适用于任何重定向到登录页面的组件?如果我有另一个组件 home2 我想重定向到登录但不重新加载登录怎么办?您还可以给我方法 1 'window.location.href="your login link"' 的函数 redirection() 的全部代码吗?提前谢谢你的朋友:)
    • 那么在 home2 组件中你将使用 this.router.navigate(['/login']);
    【解决方案2】:

    在您的登录页面上,您可以捕捉到导航事件,然后如果它是真的,您可以重新加载您的表单。希望对你有帮助:

    在您的登录页面上:

    OLD : 错误代码

    export class LoginPage implements OnInit {
      
      constructor(private router: Router) {
       router.events.subscribe(val => {
          if (val) {
            this.refreshForm(); // Refresh your form
          }
        });
      }
     
      ngOnInit(): void {
    
      }
    
    }
    

    编辑:此代码有效:

    export class LoginPage implements OnInit {
    
      constructor(private router: Router) {
       router.events.pipe(
          filter((events: RouterEvent) => events instanceof NavigationEnd),
        ).subscribe((val) => {
          if (val.url === 'LoginPage Url') { // Fill with your loginPage Url (eg. /tabs/tab1)
            this.refresh(); // Refresh your form
          }
        });
      }
    
      ngOnInit(): void {
      }
    }
    

    【讨论】:

    • 代码中的重定向函数是在哪里捕获的?没听懂:/
    • router.events.subscribe(val => { if (val) { this.refreshForm(); // 刷新你的表单 } });
    • 适用于任何重定向到登录页面的组件?如果我有另一个组件 home2 我想重定向到登录但不重新加载登录怎么办?
    • 这将捕获导航事件。如果 val 为真,您可以使用函数重置表单字段。
    • 它仅适用于该代码所在的页面。 (对不起我的英文写作)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-19
    • 2016-04-10
    相关资源
    最近更新 更多