1

我正在尝试为我的 Angular 网站设置推荐系统。我的网站目前是可在 localhost:4200 访问的一个组件。我希望用户在访问网站时能够使用推荐代码，因此请考虑“localhost:4200/r/h7Gt4p”。

当有人导航到带有推荐标签的 URL 时，如何让我的角度页面加载主要组件中的内容。此外，我如何从我的打字稿文件中的 URL 中获取引用参数？

我真的很感激任何和所有的帮助。谢谢！

4

2 回答 2

2

我建议创建一个新ReferralComponent的如下：

@Component({
  selector: 'app-referral',
  templateUrl: './referral.component.html',
  styleUrls: ['./referral.component.css']
})
export class ReferralComponent implements OnInit {

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    const code = this.route.snapshot.paramMap.get('code');
    // Process your code here. Then redirect
    this.router.navigate(['']);
  }
}

然后为您的应用配置路由：

const routes: Routes = [
  {
    path: 'r/:code',
    component: ReferralComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HelloComponent
  }
]

在这里找到一个运行示例：https ://angular-app-initial-route.stackblitz.io/r/h7Gt4p

打开浏览器的控制台以查看捕获的代码。我希望它有帮助！

于 2020-01-09T18:36:55.940 回答
1

首先，您应该设置一个新的路由路径，更多信息（此处）。我会推荐类似的东西

{ path: 'r/:refId', component: ReferralComponent }

这也需要您创建一个referralComponent，您可以在其中处理id。如果我没记错的话，你可以在你的组件中使用路由器，你可以使用 router.url[0] 从 url 中获取参数。不过我可能误解了你的问题，如果是这样，请更具体一些，我会尽力提供更多帮助。

于 2020-01-09T18:22:41.683 回答