blocks|key|2653203|text|据我所知，NG2路由器不支持外部重定向。您可以创建一个重定向组件作为变通方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2653204|import+{+Component,+OnInit+}+from+'@angular/core';

@Component({
++selector:+'redirect',
++template:+'redirecting...'
})
export+class+RedirectComponent+implements+OnInit+{
++constructor()+{+}

++ngOnInit()+{
++++window.location.href+=+'http://www.redirecturl.com'
++}
}|code-block|syntax|javascript|2653205|并在你的路由中使用它|2653206|{+path:+'login',+component:+RedirectComponent,+pathmath:+'full'},|2653207|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

As far as I know NG2 router doesn't support external redirecting. You could create a redirect component as a workaround.

<pre><code>import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'redirect',
 template: 'redirecting...'
})
export class RedirectComponent implements OnInit {
 constructor() { }

 ngOnInit() {
 window.location.href = 'http://www.redirecturl.com'
 }
}
</code></pre>

And use that in your routing

<pre><code>{ path: 'login', component: RedirectComponent, pathmath: 'full'},
</code></pre>

blocks|key|111445|text|嗯..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111446|我认为您可以简单地请求网址，而不是调用ng2路由器...|111447|111448|例如..。|111449|<a+href="http://example.com">External</a>|code-block|syntax|javascript|111450|而不是|111451|<a+routerLink="/someRoute"+routerLinkActive="active">External</a>|111452|或|offset|length|style|BOLD|111453|window.location.href+=+'http://www.example.com'|111454|111455|this.router.navigate(+[+'/someRoute',+'someParam'+]+);|111456|111457|对吧...？|111458|entityMap^0|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|18|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|19|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|I|7|1B|8|@]|9|@]|A|$J|K]]|$1|P|3|Q|5|6|7|1C|8|@$R|1D|S|1E|T|U]]|9|@]|A|$]]|$1|V|3|W|5|I|7|1F|8|@]|9|@]|A|$J|K]]|$1|X|3|M|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|I|7|1H|8|@]|9|@]|A|$J|K]]|$1|10|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1J|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|14|$]]

Hmm...

I think you can simply request the URL instead of calling ng2 Router...

<hr>

For example...

<pre><code>&lt;a href="http://example.com"&gt;External&lt;/a&gt;
</code></pre>

instead of

<pre><code>&lt;a routerLink="/someRoute" routerLinkActive="active"&gt;External&lt;/a&gt;
</code></pre>

OR

<pre><code>window.location.href = 'http://www.example.com'
</code></pre>

instead of

<pre><code>this.router.navigate( [ '/someRoute', 'someParam' ] );
</code></pre>

<hr>

Right...?

blocks|key|2653209|text|路由器不能从外部重定向。外部资源不能是应用程序的状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2653210|如果只是为了清楚起见，让所有路由都在一个点上可见，那么您可以定义另一个常量数组，将所有外部路径与路由放在同一个文件中。|2653211|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The Router can't redirect externally. An external resource can't be a state of the app.

If it's only for clarity, keeping all the routes visible in the one spot, you could define another constant array with all the external paths in the same file as the routes.

blocks|key|108829|text|您可以使用路由的resolve选项通过一个技巧实现您想要的结果。Resolve是Angular2将为要初始化的路由获取的某个数据值。更多详细信息，您可以在官方文档中找到here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|108830|我尝试过这种方法，它确实起作用了。示例：|108831|将其添加到provider部分(外加从Routing导入所需的类)|108832|@NgModule({
++++providers:+[
++++++++{
++++++++++++provide:+'externalUrlRedirectResolver',
++++++++++++useValue:+(route:+ActivatedRouteSnapshot,+state:+RouterStateSnapshot)+=>
++++++++++++{
++++++++++++++++window.location.href+=+(route.data+as+any).externalUrl;
++++++++++++}
++++++++}
++++]
})|code-block|syntax|javascript|108833|然后你可以像这样定义你的路线：|108834|{
++++++++path:+'test',
++++++++component:+AnyRandomComponent,
++++++++resolve:+{
++++++++++++url:+'externalUrlRedirectResolver'
++++++++},
++++++++data:+{
++++++++++++externalUrl:+'http://www.google.com'
++++++++}
++++}|108835|这将重定向到外部URL。这是一个有点老土的方式真的。我试图在根本不使用该组件的情况下实现该结果，但您必须使用redirectTo或component或children或loadChildren。redirectTo不会触发解决方案，我不确定孩子们，尽管你可以进行实验。|style|CODE|108836|您可以在一个很好的类中实现它，而不是在provider中直接使用函数。文档中有更多信息(请参阅上面的参考资料)。|108837|附言:我真的宁愿自己使用重定向组件，我想。只需对数据使用技巧，并使用externalUrl从路由器获取状态，即可将其作为参数。|108838|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html^0|2C|4|0|0|0|0|0|0|0|1I|A|1T|9|23|8|2C|C|2P|A|0|0|Y|B|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1E|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@$A|1G|B|1H|S|T]|$A|1I|B|1J|S|T]|$A|1K|B|1L|S|T]|$A|1M|B|1N|S|T]|$A|1O|B|1P|S|T]]|9|@]|C|$]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1R|8|@$A|1S|B|1T|S|T]]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]]]

You can achieve what you want with a trick using the resolve option of a route. Resolve is some data value that Angular2 will obtain for the route to be initialized. More details you can find <a href="https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html" rel="noreferrer">here</a> in the official documentation.

I have tried this approach and it does work. Example:

Add this to the provider section (plus import the required classes from Routing)

<pre><code>@NgModule({
 providers: [
 {
 provide: 'externalUrlRedirectResolver',
 useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =&gt;
 {
 window.location.href = (route.data as any).externalUrl;
 }
 }
 ]
})
</code></pre>

Then you can define your route like this:

<pre><code>{
 path: 'test',
 component: AnyRandomComponent,
 resolve: {
 url: 'externalUrlRedirectResolver'
 },
 data: {
 externalUrl: 'http://www.google.com'
 }
 }
</code></pre>

This will redirect to the external URL. It's a bit of a hackish way really. I tried to achieve the result without using the component at all, but you have to use either <code>redirectTo</code> or <code>component</code> or <code>children</code> or <code>loadChildren</code>. <code>redirectTo</code> won't trigger the resolve and I am not sure about children, though you can experiment.

You can implement it in a nice class rather than direct function in provider. More info in the documentation (see reference above).

P.S. I would really rather use a redirect component myself I think. Just use the trick with the data and getting the state from the router with <code>externalUrl</code> to get this as a parameter.

blocks|key|2864446|text|我假设你不想为每个单独的url创建一个组件，这就是为什么你希望在没有组件的情况下做到这一点……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2864447|因此，您可以尝试创建一个函数来为您生成组件对象...|2864448|例如..。|2864449|function+generateLinkingComponent(+url+)+{
++//+Generate+your+component+using+koningdavid's+code
++//+replace+'http://www.redirecturl.com'+with+url+param
++//+and+return+it...
}|code-block|syntax|javascript|2864450|并像这样添加到您的路由器配置中...|2864451|const+appRoutes:+Routes+=+[
++{path:+'',+component:+HomeComponent},
++{path:+'first',+component:+FirstComponent},
++{path:+'second',+component:+SecondComponent},
++{path:+'external-link',+component:+generateLinkingComponent(+'http://example.com'+)},
++{path:+'client-login',+component:+generateLinkingComponent(+'http://client-login.example.com'+)},
++{path:+'admin-login',+component:+generateLinkingComponent(+'http://admin.example.com'+)},
];|2864452|有了JS，这将会很容易。但是不确定如何在typeScript中的函数中返回类...|2864453|希望这能帮上忙。|2864454|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I assume you don't wanna create a component for every single url, which is why you are looking to do it without a component...

So you can try creating a function that generates the component object for you...

For example...

<pre><code>function generateLinkingComponent( url ) {
 // Generate your component using koningdavid's code
 // replace 'http://www.redirecturl.com' with url param
 // and return it...
}
</code></pre>

And add it like this in your router config...

<pre><code>const appRoutes: Routes = [
 {path: '', component: HomeComponent},
 {path: 'first', component: FirstComponent},
 {path: 'second', component: SecondComponent},
 {path: 'external-link', component: generateLinkingComponent( 'http://example.com' )},
 {path: 'client-login', component: generateLinkingComponent( 'http://client-login.example.com' )},
 {path: 'admin-login', component: generateLinkingComponent( 'http://admin.example.com' )},
];
</code></pre>

This will be easy with JS... but not sure how one can return a class in a function in typeScript...

Hope that helps...

blocks|key|108904|text|总结一下Ilya的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|108905|添加此模块。|108906|import+{+Component,+Injectable,+NgModule+}+from+'@angular/core';
import+{+ActivatedRouteSnapshot,+Resolve+}+from+'@angular/router';

@Component({
++template:+''
})
class+ExternalLinkComponent+{
++constructor()+{
++}
}

@Injectable()
class+ExternalLinkResolver+implements+Resolve<any>+{
++resolve(route:+ActivatedRouteSnapshot):+any+{
++++window.location.href+=+route.data.targetUri;
++++return+true;
++}
}

export+class+ExternalRoute+{
++data:+{
++++targetUri:+string;
++};
++path:+string;
++pathMatch+=+'full';
++resolve+=+{+link:+ExternalLinkResolver+};
++component+=+ExternalLinkComponent;

++constructor(path:+string,+targetUri:+string)+{
++++this.path+=+path;
++++this.data+=+{+targetUri:+targetUri+};
++}

}

@NgModule({
++providers:+[+ExternalLinkResolver+],
++declarations:+[ExternalLinkComponent]
})
export+class+ExternalRoutesModule+{+}|code-block|syntax|javascript|108907|然后导入ExternalRoutesModule并添加ExternalRoute的实例。|offset|length|style|CODE|108908|const+childRoutes:+Routes+=+[
++new+ExternalRoute('',+'/settings/account'),
++{+path:+'staff-profiles',+component:++StaffProfilesComponent},
++{+path:+'staff-assignments',+component:++StaffAssignmentsComponent}
];

const+routes:+Routes+=+[
++{+path:+'',+component:+BaseComponent,+children:+childRoutes+}
];

@NgModule({
++imports:+[+ExternalRoutesModule,+RouterModule.forChild(routes)+],
++exports:+[+RouterModule+]
})
export+class+SettingsRoutingModule+{+}|108909|请注意，在本例中，我通过loadChildren挂载子模块路由。|108910|entityMap^0|0|0|0|4|K|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Wrapping up Ilya's answer:

Add this module.

<pre><code>import { Component, Injectable, NgModule } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';

@Component({
 template: ''
})
class ExternalLinkComponent {
 constructor() {
 }
}

@Injectable()
class ExternalLinkResolver implements Resolve&lt;any&gt; {
 resolve(route: ActivatedRouteSnapshot): any {
 window.location.href = route.data.targetUri;
 return true;
 }
}

export class ExternalRoute {
 data: {
 targetUri: string;
 };
 path: string;
 pathMatch = 'full';
 resolve = { link: ExternalLinkResolver };
 component = ExternalLinkComponent;

 constructor(path: string, targetUri: string) {
 this.path = path;
 this.data = { targetUri: targetUri };
 }

}

@NgModule({
 providers: [ ExternalLinkResolver ],
 declarations: [ExternalLinkComponent]
})
export class ExternalRoutesModule { }
</code></pre>

Then import <code>ExternalRoutesModule</code> and add instances of ExternalRoute.

<pre><code>const childRoutes: Routes = [
 new ExternalRoute('', '/settings/account'),
 { path: 'staff-profiles', component: StaffProfilesComponent},
 { path: 'staff-assignments', component: StaffAssignmentsComponent}
];

const routes: Routes = [
 { path: '', component: BaseComponent, children: childRoutes }
];

@NgModule({
 imports: [ ExternalRoutesModule, RouterModule.forChild(routes) ],
 exports: [ RouterModule ]
})
export class SettingsRoutingModule { }
</code></pre>

Note I'm mounting the submodule routes via loadChildren in this example.

blocks|key|2864575|text|您可以创建RedirectGuard：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2864576|import+{Injectable}+from+'@angular/core';
import+{CanActivate,+ActivatedRouteSnapshot,+Router,+RouterStateSnapshot}+from+'@angular/router';

@Injectable({
++++providedIn:+'root'
})
export+class+RedirectGuard+implements+CanActivate+{

++constructor(private+router:+Router)+{}

++canActivate(route:+ActivatedRouteSnapshot,+state:+RouterStateSnapshot):+boolean+{

++++++window.location.href+=+route.data['externalUrl'];
++++++return+true;

++}
}|code-block|syntax|javascript|2864577|在app.module中导入：|2864578|providers:+[RedirectGuard],|2864579|并定义您的路线：|2864580|{
+++++path:+'youtube',
+++++canActivate:+[RedirectGuard],
+++++component:+RedirectGuard,
+++++data:+{
+++++++externalUrl:+'https://www.youtube.com/'
+++++}
+}|2864581|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can create a RedirectGuard:

<pre><code>import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';

@Injectable({
 providedIn: 'root'
})
export class RedirectGuard implements CanActivate {

 constructor(private router: Router) {}

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

 window.location.href = route.data['externalUrl'];
 return true;

 }
}
</code></pre>

Import it in app.module:

<pre><code>providers: [RedirectGuard],
</code></pre>

And define your route:

<pre><code>{
 path: 'youtube',
 canActivate: [RedirectGuard],
 component: RedirectGuard,
 data: {
 externalUrl: 'https://www.youtube.com/'
 }
 }
</code></pre>

blocks|key|108918|text|您可以使用NavigationEnd事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|108919|从‘@angular/+Router’导入{+NavigationEnd，router}；|108920|app.component.ts|108921|this.router.events.subscribe(event+=>+{
++if+(event+instanceof+NavigationEnd)+{
++++if+(event.url.includes('faq'))+{
++++++//+open+in+the+same+tab:
++++++window.location.href+=+'https://faq.website.com';

++++++//+open+a+new+tab:
++++++//+window.open('https://faq.website.com',+'_blank');

++++++//+and+redirect+the+current+page:
++++++//+this.router.navigate(['/']);
++++}
++}
});|code-block|syntax|javascript|108922|P.S.不要忘记从AppRoutingModule中删除您的路由。|108923|entityMap^0|5|D|0|0|0|G|0|0|0|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

You can use the NavigationEnd event.

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

app.component.ts

<pre><code>this.router.events.subscribe(event =&gt; {
 if (event instanceof NavigationEnd) {
 if (event.url.includes('faq')) {
 // open in the same tab:
 window.location.href = 'https://faq.website.com';

 // open a new tab:
 // window.open('https://faq.website.com', '_blank');

 // and redirect the current page:
 // this.router.navigate(['/']);
 }
 }
});
</code></pre>

P.S. Don't forget to remove your route from the AppRoutingModule.

blocks|key|111074|text|只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111075|{
++++path:+'external-link',
++++loadChildren:+()+=>+new+Promise(+()+=>+{+if(window.location.href.match(/external-link/)+)+window.location.href+=+'https://external-link.com/';+}+)+
++},|code-block|syntax|javascript|111076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

just use:
<pre><code>{
 path: 'external-link',
 loadChildren: () =&gt; new Promise( () =&gt; { if(window.location.href.match(/external-link/) ) window.location.href = 'https://external-link.com/'; } ) 
 },
</code></pre>

blocks|key|111533|text|这里有一个代码，它应该可以在你没有太多问题的情况下工作。仅供参考，路由器事件错误处理程序可以放置在任何位置，而与组件中的位置无关。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111534|app.component.html|111535|Angular+Port+is+in+4200
<a+routerLink="/test">Main+Link+-+1</a>+%7C

<a+[routerLink]="getLinkWithExternal({url:+'/test',+external:false})">Other+Link+-+1a</a>+%7C
<a+[routerLink]="getLinkWithExternal({url:+'http://localhost:4211',+external:true})">Other+Link+-+1b</a>+%7C

<a+[routerLink]="getLink({url:+'/test'})">Other+Link+-+1a</a>+%7C
<a+[routerLink]="getLink({url:+'http://localhost:4211'})">Other+Link+-+1b</a>+%7C


<a+style="cursor:+pointer;+text-decoration:+underline;"+(click)="routeLink('/test')">Other+Link+-+1c</a>+%7C
<a+style="cursor:+pointer;+text-decoration:+underline;"+(click)="routeLink('http://localhost:4211')">Other+Link+-+1d</a>

<router-outlet></router-outlet>|code-block|syntax|javascript|111536|app.component.ts|111537|import+{+Component+}+from+'@angular/core';
import+{+NavigationEnd,+Router+}+from+'@angular/router';

@Component({
++selector:+'app-root',
++templateUrl:+'./app.component.html',
++styleUrls:+['./app.component.css']
})
export+class+AppComponent+{
++title+=+'app';

++constructor(private+router:+Router)+{+}

++//+RECOMMENDATION+-+Add+following+in+menus+of+each+microservice+(individual+and+different)
++//++++external:+true
++//+Will+make+it+a+better+menu+structure+for+each+microservice
++//+If+Single+and+same+menu+for+all+microservices+then+remove+external+===+true
++//+Logic+One
++getLinkWithExternal(sidebarnavLink:+any)+{
++++this.router.errorHandler+=+function+(error:+any)+{
++++++if+(!sidebarnavLink.url.includes(window.location.origin.toString())+&&+sidebarnavLink.url.includes("http")+&&+sidebarnavLink.external+===+true)+{
++++++++window.location.href+=+sidebarnavLink.url.toString();
++++++++return+true;
++++++}
++++++return+null;
++++}.bind(sidebarnavLink);
++++return+[sidebarnavLink.url];
++}

++getLinkWithExternalWithEventSubscribe(sidebarnavLink:+any)+{
++++this.router.events.subscribe(function+(event)+{
++++++if+(event+instanceof+NavigationEnd)+{
++++++++if+(event.url.includes('http'))+{
++++++++++if+(!sidebarnavLink.url.includes(window.location.origin.toString())+&&+sidebarnavLink.url.includes("http")+&&+sidebarnavLink.external+===+true)+{
++++++++++++window.location.href+=+sidebarnavLink.url.toString();
++++++++++++return+true;
++++++++++}
++++++++++return+this.router.navigateByUrl(sidebarnavLink.url);
++++++++++//+return+this.router.navigate([sidebarnavLink.url]);
++++++++}
++++++++return+this.router.navigateByUrl(sidebarnavLink.url);
++++++++//+return+this.router.navigate([sidebarnavLink.url]);
++++++}
++++}.bind(sidebarnavLink))
++}

++getLinkWithExternalImplementationTwoWithNoRouteError(sidebarnavLink:+any)+{
++++if+(!sidebarnavLink.url.includes(window.location.origin.toString())+&&+sidebarnavLink.url.includes("http")+&&+sidebarnavLink.external+===+true)+{
++++++window.location.href+=+sidebarnavLink.url.toString();
++++++return+true;
++++}
++++return+[sidebarnavLink.url];
++}

++//+Logic+Two
++getLink(sidebarnavLink:+any)+{
++++this.router.errorHandler+=+function+(error:+any)+{
++++++if+(!sidebarnavLink.url.includes(window.location.origin.toString())+&&+sidebarnavLink.url.includes("http"))+{
++++++++window.location.href+=+sidebarnavLink.url.toString();
++++++++return+true;
++++++}
++++++return+null;
++++}.bind(sidebarnavLink);
++++return+[sidebarnavLink.url];
++}

++//+Logic+Three
++routeLink(lnk:+any)+{
++++if+(lnk.includes("http"))+{
++++++console.log("Test");
++++++window.location.href+=+lnk;
++++++return+true;
++++}
++++return+this.router.navigateByUrl(lnk);
++++//+return+this.router.navigate([lnk]);
++}

}|111538|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is a code that should work for you without a lot of issues. FYI the router events error handler can be put anywhere irrespective of placement in the component.
app.component.html
<pre><code>Angular Port is in 4200
&lt;a routerLink=&quot;/test&quot;&gt;Main Link - 1&lt;/a&gt; |

&lt;a [routerLink]=&quot;getLinkWithExternal({url: '/test', external:false})&quot;&gt;Other Link - 1a&lt;/a&gt; |
&lt;a [routerLink]=&quot;getLinkWithExternal({url: 'http://localhost:4211', external:true})&quot;&gt;Other Link - 1b&lt;/a&gt; |

&lt;a [routerLink]=&quot;getLink({url: '/test'})&quot;&gt;Other Link - 1a&lt;/a&gt; |
&lt;a [routerLink]=&quot;getLink({url: 'http://localhost:4211'})&quot;&gt;Other Link - 1b&lt;/a&gt; |


&lt;a style=&quot;cursor: pointer; text-decoration: underline;&quot; (click)=&quot;routeLink('/test')&quot;&gt;Other Link - 1c&lt;/a&gt; |
&lt;a style=&quot;cursor: pointer; text-decoration: underline;&quot; (click)=&quot;routeLink('http://localhost:4211')&quot;&gt;Other Link - 1d&lt;/a&gt;

&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>
app.component.ts
<pre><code>import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';

 constructor(private router: Router) { }

 // RECOMMENDATION - Add following in menus of each microservice (individual and different)
 // external: true
 // Will make it a better menu structure for each microservice
 // If Single and same menu for all microservices then remove external === true
 // Logic One
 getLinkWithExternal(sidebarnavLink: any) {
 this.router.errorHandler = function (error: any) {
 if (!sidebarnavLink.url.includes(window.location.origin.toString()) &amp;&amp; sidebarnavLink.url.includes(&quot;http&quot;) &amp;&amp; sidebarnavLink.external === true) {
 window.location.href = sidebarnavLink.url.toString();
 return true;
 }
 return null;
 }.bind(sidebarnavLink);
 return [sidebarnavLink.url];
 }

 getLinkWithExternalWithEventSubscribe(sidebarnavLink: any) {
 this.router.events.subscribe(function (event) {
 if (event instanceof NavigationEnd) {
 if (event.url.includes('http')) {
 if (!sidebarnavLink.url.includes(window.location.origin.toString()) &amp;&amp; sidebarnavLink.url.includes(&quot;http&quot;) &amp;&amp; sidebarnavLink.external === true) {
 window.location.href = sidebarnavLink.url.toString();
 return true;
 }
 return this.router.navigateByUrl(sidebarnavLink.url);
 // return this.router.navigate([sidebarnavLink.url]);
 }
 return this.router.navigateByUrl(sidebarnavLink.url);
 // return this.router.navigate([sidebarnavLink.url]);
 }
 }.bind(sidebarnavLink))
 }

 getLinkWithExternalImplementationTwoWithNoRouteError(sidebarnavLink: any) {
 if (!sidebarnavLink.url.includes(window.location.origin.toString()) &amp;&amp; sidebarnavLink.url.includes(&quot;http&quot;) &amp;&amp; sidebarnavLink.external === true) {
 window.location.href = sidebarnavLink.url.toString();
 return true;
 }
 return [sidebarnavLink.url];
 }

 // Logic Two
 getLink(sidebarnavLink: any) {
 this.router.errorHandler = function (error: any) {
 if (!sidebarnavLink.url.includes(window.location.origin.toString()) &amp;&amp; sidebarnavLink.url.includes(&quot;http&quot;)) {
 window.location.href = sidebarnavLink.url.toString();
 return true;
 }
 return null;
 }.bind(sidebarnavLink);
 return [sidebarnavLink.url];
 }

 // Logic Three
 routeLink(lnk: any) {
 if (lnk.includes(&quot;http&quot;)) {
 console.log(&quot;Test&quot;);
 window.location.href = lnk;
 return true;
 }
 return this.router.navigateByUrl(lnk);
 // return this.router.navigate([lnk]);
 }

}
</code></pre>

I would like to create an external redirect, but to make all routes consistent I think it would be nice to do everything(including external redirects) under Router States configuration.

so:

<pre><code>const appRoutes: Routes = [
 {path: '', component: HomeComponent},
 {path: 'first', component: FirstComponent},
 {path: 'second', component: SecondComponent},
 {path: 'external-link', /*would like to have redirect here*/} 
];
</code></pre>

UPD: and I don't want to use empty component for this case like @koningdavid suggested. This solution looks really weird for me. It should be something really easy to implement for such case, without virtual components.

How to redirect to an external URL from angular2 route without using component?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想创建一个外部重定向，但为了使所有路由保持一致，我认为在路由器状态配置下执行所有操作(包括外部重定向)会更好。所以：const appRoutes: Routes = [  {path: '', component: HomeComponent},  {path: 'first', component: FirstC...

问如何在不使用组件的情况下从angular2路由重定向到外部URL？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不使用组件的情况下从angular2路由重定向到外部URL？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不使用组件的情况下从angular2路由重定向到外部URL？
EN