angular2-routing

Wildcard selector in the middle in Angular 2 router

不羁岁月 提交于 2019-12-23 15:09:58
问题 I am trying to develop a project with Angular.js 2. I am trying to use the router. I am trying to create a route with parameters to catch things like following: /m/SOMETHING1/c/SOME/THING2/p/SOMETHING3 Please note that SOME/THING2 is a string, that may include 0 or more / in it What I need for Route Definition is something like: { path: "/m/:sth1Var/c/*sth2Var/p/:sth3Var", component: MultiPost, name: "RouteName" } But I couldn't find a way to use wildcard character (*) in the middle. Is the

Angular2 ComponentRouter prevent automatic component reuse [duplicate]

三世轮回 提交于 2019-12-23 15:06:18
问题 This question already has answers here : Angular2 Routing - keeping state of component when route changes [duplicate] (2 answers) Closed 3 years ago . Documentation https://angular.io/docs/ts/latest/guide/router.html states ... By default, the router reuses a component instance when it re-navigates to the same component type without visiting a different component first. The parameters can change between each re-use... but there is no hint how to change this default-behavior. Is it possible to

Angular 2 - Content not loading in router outlet

社会主义新天地 提交于 2019-12-23 13:16:10
问题 I'm still pretty new to Angular 2, hopefully you guys can help me out. I have a fairly simple app, there's a login page, after successful login the user is directed to a page with a sidemenu. The login screen doesn't have this sidemenu. When the user logs out he is directed to the login page again. The problem is that after login the sidemenu becomes visible but the other content is only visible after a refresh. Same thing for logout, after logout the page is blank, only after refresh the

How to get the page hostname in Angular 2?

不羁岁月 提交于 2019-12-23 12:52:13
问题 I need to get the subdomain of a page in Angular 2 because it is relevant to the route. I see that after multiple breaking releases the Router service in Angular 2 still has no notion of domain. Similarly, the Location service is ignorant of the host part of the URL. 回答1: There is no build in way to get current host. If you don't want to use window.location directly you can inject it, i.e. if you need only host you can add the following into module providers: { provide: 'HOST', useValue:

Angular 2 - send object from one component to another over router-link

非 Y 不嫁゛ 提交于 2019-12-23 10:55:19
问题 Im trying to send an object over router-link in angular 2. I create a person-profile component for every person object in my person array people and display them on my screen. <div *ngFor="#person of people; #i = index"> <person-profile [person]="person"></person-profile> </div> The person-profile component displays several pieces of information contained in the person object. Im trying to send the entire person object from the person-profile component to a component named "map" using a

Resolve a value *before* activating a route in Angular 2

一笑奈何 提交于 2019-12-23 10:17:24
问题 I'd like to prevent a route from being accessed as long as a promise hasn't been resolved. Also, I'd like to pass the return value of that promise to the route component. Several posts on SO recommend using the OnActivate interface for this. The documentation says: "If routerOnActivate returns a promise, the route change will wait until the promise settles to instantiate and activate child components ." Sounds perfect, only the route still gets activated immediately... (Is it because it's the

How to make Angular 2 pick up dynamically added routerLink directive

∥☆過路亽.° 提交于 2019-12-23 07:46:30
问题 As seen in this plunker, I'm dynamically adding an HTML to one of my elements, which boils down to this: @Component({ selector: 'my-comp', template: `<span [innerHTML]="link"></span>`, }) export class MyComponent { private linkContent = '<a routerLink="/my-route">GoTo Route</a>'; private link; constructor(sanitizer: DomSanitizer) { this.link = sanitizer.bypassSecurityTrustHtml(linkContent); } } This results in <a routerLink="/my-route">GoTo Route</a> being added to the DOM, but Angular knows

Angular 2: How to provide interpolation with [routerLink]

风流意气都作罢 提交于 2019-12-23 06:58:06
问题 I have routing defined in routing.ts file in this way. const routesapp: Routes= [ {path:'user/id', component:UserComponent} ]; export const:routing ModuleWithProviders = RouterModule.forRoot(routesapp, {useHash:true}); and in HTML <li class ="Some class"> <a href= "#/user/{{id}}"> Link </a> </li> How do I convert this to work with [routerLink]? From previous posts I learnt that we cannot add interpolation with [routerLink], i.e [routerLink] = ['user/{{id}}'] I want to add interpolation in

Angular 2 Check if query parameter exists in the url

淺唱寂寞╮ 提交于 2019-12-23 06:57:02
问题 I need to check if the current url has query string. url can be http://localhost:4200/test?id=55555 or http://localhost:4200/test I have used this.route.queryParams .filter(params => 'id' in params) .map(params => params.id) .distinctUntilChanged() .subscribe( id=> { //check lead Id here console.log(id); } ); But this only works when there is id in the url. Not sure how to check if it exists. 回答1: I would say using: ngOnInit() { if (this.route.snapshot.queryParams['id']) { //do your stuff.

Disable back-page button in browser

*爱你&永不变心* 提交于 2019-12-23 05:27:07
问题 I create auth app with routing in angular 2 with typescript. And now my task is disabled back button in browser from form localhost/form1 to localhost/login ; how implement this? 回答1: You can't really block the back button since it's a browser behavior. What you can do instead is to create a guard to handle every request, and if the request is done to load /login and the user is already loggued, simply redirect to the previous page. 回答2: I solved this in my angular cordova app to prevent app