angular-routerlink

Angular: configure default QueryParamsHandling

由 半腔热情 提交于 2021-02-08 09:15:48
问题 I've built an angular 9 app, and added localization with @ngx-translate. I've configured my app so that it takes the lang query parameter and changes the locale accordingly. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, OnDestroy { constructor(private route: ActivatedRoute, private translateService: TranslateService) { this.translateService.setDefaultLang('en'); this.route

Best way to pass angular routerLink URL's in an HTML string

由 China☆狼群 提交于 2020-01-25 00:14:10
问题 I have a notification service in my angular app, typically you call it like this.notificationsService.showError('My Title', 'My Message...'); I'd like to have the ability to to pass app links in the messages as well, and I know I need to allow SafeHtml input, like this: this.notificationsService.showError( 'Error!', this.domSanitizer.bypassSecurityTrustHtml( `Something has gone wrong, but you can go to <a routerLink="'/home/accounts-list'">home page</a> to start over.` ) ); Over in my service

ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

由 爷，独闯天下 提交于 2020-01-12 06:57:05
问题 I have simple navigation in angular 6 app, Here is HTML <nav class="main-nav> <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''"> <li class="main-nav__item"> <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a> </li> <li class="main-nav__item"> <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a> </li> </ul> </nav> here is app.routing module import {

When should href be used instead of routerLink in Angular?

由 时光毁灭记忆、已成空白 提交于 2019-12-12 03:24:27
问题 When I develop in Angular and create views, I always use the routerLink to navigate from one view to another. Recently I have seen important pages made in Angular that use href instead of routerLink to route views on the website. My question is, when is it convenient to use href instead of routerLink in Angular and why? Is it to give the feeling that it is not a SPA? If so, I do not understand it because it loses the full potential of Angular routing. Some examples are https://brandstory.in/

Router navigate to child route - Angular 6

由 那年仲夏 提交于 2019-12-10 15:44:27
问题 I've defined my routes like this: const routes: Routes = [ { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }, { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' }, { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} and like this: const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ { path: '', redirectTo: '/tabs/

Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone'

由 [亡魂溺海] 提交于 2019-12-09 07:58:59
问题 I am struggling with Angular framework to get my application run smoothly, but I can't resolve an issue with routing. I have a top level AppComponent and app-routing.module.ts which manage the navigation via my custom SlideMenuComponent . My simplified html template of AppComponent : <app-slide-menu [buttons]="menuButtons"></app-slide-menu> <router-outlet></router-outlet> My SlideMenuComponent has the following html as its core: <nav><div *ngFor="let button of buttons"> <a routerLink="{

Angular - Apply style to element depending on sibling RouterLinkActive?

由 北城余情 提交于 2019-12-07 05:02:20
问题 I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive ? menu.html <menu> <a routerLink="page1" routerLinkActive="active"> option1 </a> <a routerLink="page2" routerLinkActive="active"> option2 </a> </menu> This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like: main.html

Angular - Apply style to element depending on sibling RouterLinkActive?

由 孤者浪人 提交于 2019-12-05 09:16:47
I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive ? menu.html <menu> <a routerLink="page1" routerLinkActive="active"> option1 </a> <a routerLink="page2" routerLinkActive="active"> option2 </a> </menu> This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like: main.html <main> <span class="title" routerLinkActive="active">My sub child part</span> </main> You could bind

ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

由 随声附和 提交于 2019-12-03 23:47:15
I have simple navigation in angular 6 app, Here is HTML <nav class="main-nav> <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''"> <li class="main-nav__item"> <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a> </li> <li class="main-nav__item"> <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a> </li> </ul> </nav> here is app.routing module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule,

Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone'

由 十年热恋 提交于 2019-12-03 10:21:35
I am struggling with Angular framework to get my application run smoothly, but I can't resolve an issue with routing. I have a top level AppComponent and app-routing.module.ts which manage the navigation via my custom SlideMenuComponent . My simplified html template of AppComponent : <app-slide-menu [buttons]="menuButtons"></app-slide-menu> <router-outlet></router-outlet> My SlideMenuComponent has the following html as its core: <nav><div *ngFor="let button of buttons"> <a routerLink="{{button.routerLink}}" >{{button.name}}</a> </div></nav> A user can navigate to '/courses' through this slide
订阅 angular-routerlink