知道Angular 5

Question

{
    path: 'contacto-new-from-a',
    component: ContactoPopupComponent,
    outlet: 'popup'
},    {
    path: 'contacto-new-from-b',
    component: ContactoPopupComponent,
    outlet: 'popup'
},

根据执行它的原始视图，我希望同一个组件有两种不同的行为。

我有一些了解目标组件的方法，即源路径。

谢谢。

Answer 1

虽然检查URL是一种有效的方法，但我认为识别路由的最易维护方式和最不容易出错的方法是通过路由传递固定的令牌值。

在路线定义中执行：

{
   path: 'contacto-new-from-a',
   component: ContactoPopupComponent,
   outlet: 'popup',
   data: {
     token: 'routeA'
   }
},    
{
   path: 'contacto-new-from-b',
   component: ContactoPopupComponent,
   outlet: 'popup',
   data: {
     token: 'routeB'
   }
}

在您的组件中

constructor(private route:ActivatedRoute, ...) {}

ngOnInit() {
    this.route.data.subscribe((data:{token:string}) => {
         switch(data.token) {
             case 'routeA':
                   // Your logic
                   ....;
             case 'routeB':
                   // Your logic
                   ....;
         }
    });
}

请注意，这也适用于未销毁组件时的路线更改（例如，从contacto-new-from-a导航到contacto-new-from-b）

Answer 2

if(this.route.snapshot.url[0].path === 'contacto-new-from-cliente') {
      this.fromCliente = true;
}

Answer 3

  this.siteUrl = window.location.href;
  this.isBSite= this.siteUrl.indexOf('contacto-new-from-b') !== -1;

这是检查您所在网址的黑客

或者这个

this.activatedRoute.snapshot.url.toString().indexOf('contacto-new-from-b') !== -1;

但您需要添加导入

import {ActivatedRoute, Router} from '@angular/router';