Question

我必须走路， http://localhost:3000/#/activateAccount/1341564455sdfr http://localhost:3000/#/resetPassword/1145gh5w2dd

和app.routes.ts文件中的代码是

{ path: 'activateAccount/:temp_id', component: FrontGeneralComponent },
{ path: 'resetPassword/:reset_id', component: FrontGeneralComponent },

我想要的只是单个组件用于上述两个URL，但我不知道如何将特定功能调用到组件中，

假设我在组件中有2个功能，1个用于帐户激活，其他用于密码重置，但它如何从路由调用中调用它。注意：两者都在同一个组件中。我想根据路线路径给他们打电话。

function activateAccount()
{
    // Code will go here to activate based on temp. id
}

function resetPassword()
{
    // Code will go here to reset password based on temp. id
}

Answer 1

获取激活路线的参数，可以注入activatedRoute。

您可以让您的组件实现＆＃39; OnInit＆＃39;来自@ angular / core的接口，然后使用＆＃34; ngOnInit＆＃34; Angular在创建组件时将调用的方法。

在此方法中，您可以检查参数并根据它们调用另一个函数。这样的事情：

class myComponent implement OnInit {

   constructor (private activatedRoute: ActivatedRoute) {}

   ngOnInit () {
      this.activatedRoute.params.subscribe((params) {
          if (params['temp_id']) { this.activateAccount(); }
          else if (params['reset_id']) { this.resetPassword(); }
      });
   }

}

最后，我警告你，拥有这样的组件不是一个好习惯。一个组件假设只做一件事而一件事。您正在创建一个根据路由具有多个行为的组件。最好有两个不同的组件。或者至少是一个父组件和一些孩子，一个可以激活帐户，另一个可以重置密码。

希望有所帮助

如何在Route Path Angular2中调用Component的特定功能

1 个答案: