标签: angular-routerlink

[routerLink]和之间有什么区别routerLink？你应该如何使用每一个？

我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题.我有一个顶级,AppComponent并app-routing.module.ts通过我的自定义管理导航SlideMenuComponent.我简化的html模板AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

我SlideMenuComponent的以下html为核心:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

用户可以导航'/courses'到此幻灯片菜单,该菜单由CoursesComponent分页指向由指向CourseComponent服务器检索的特定s的链接监督.这些组件位于各自的courses.module.ts模块中courses-routing.module.ts.但是,当我点击任何这些链接时,我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告,ngOnInit()不会被打开CourseCompontent,并且它不会更新,直到我点击页面上的任何按钮.我router.navigate()通过转发此任务解决了手动导航时出现此问题NgZone.runTask(router.navigate()),但为什么会发生anchor标签和routerLinkdirecrives？这是我的CoursesComponent代码摘录:

<nav><ul>
        <li *ngFor="let course of api.data | paginate: {
            currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
        }">
           <a
               [routerLink]="course._id"
               [queryParams]="{ …

我在角度6应用程序中有简单的导航,

这是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>

这是app.routing模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from …

我想创建一个带有多个参数的路由链接,并将它们绑定在tempalte中.到目前为止,我一直在通过执行(click)事件的函数来做到这一点,但我想知道它是否可能在RouterLink绑定中.

这是我用来绑定参数的函数:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

我的路线看起来像:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

我可以做同样的内部routerLink指令吗？

我正在尝试用角度2创建一个应用程序,并且想要传递params来标记[routerLink]中的一个,我想要像这样的链接:

<a href="/auth/signup?cell=1654654654"></a>

我不知道如何传递cell模板......

如何使用routerLinkActive点击事件和不使用routerLink？我在某处读到，同时使用 click 和 routerLink 并不是一个好的做法。我想在单击链接时设置一个活动类，并希望在将用户导航到单击的页面之前对单击事件执行一些业务功能。下面的代码没有设置类。

<button
    type="button"
    class="list-group-item list-group-item-action"
    routerLinkActive="active"
    *ngFor="let service of services"
    (click)="changeService(service)">
    {{ service | titlecase }}
</button>

任务-为Angular库创建一个可重用的button / anchor标记属性选择的组件，该行为本身的大部分逻辑都绑定在该组件本身上，而不是在HTML标记上。

HTML标记在理想情况下应尽可能整洁

<a routerLink="" attributeSelectorForComponent></a>

问题-尝试[attr.disabled]通过单击侦听器防止锚标记上出现routerLink时触发。

  @HostListener('click', ['$event']) onMouseClick(event: Event) {
    event.stopImmediatePropagation();
    event.preventDefault()
  }

为了简化起见，从等式中删除了禁用的逻辑，无论如何，仍会触发routerLink。

建议的解决方案- 如何有条件地禁用routerLink属性？并不能真正解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件：没有鼠标悬停，单击ect要求相对复杂的操作解决方案，以检测disable属性并相应地删除css，并且通常似乎比正确的解决方案更讲究技巧。

我的应用程序上没有一个菜单栏,当用户导航时我需要绘制,我还有其他组件也需要绘制.我可以实现这个routerLinkActive吗？

menu.html

<menu>
  <a routerLink="page1" routerLinkActive="active">
      option1
  </a>
  <a routerLink="page2" routerLinkActive="active">
      option2
  </a>
</menu>

这个菜单很棒.但我要问的是如何利用其他HTML标签中的routerLinkActive属性.喜欢:

main.html中

<main>
    <span class="title" routerLinkActive="active">My sub child part</span>
</main>

我已经定义了这样的路线：

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 {}

像这样：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: …

在过去的两天中，我一直在Internetz上挖掘有关将片段滚动到具有角度的视图中的信息。

假设我们有一个静态网页，其中包含一堆充当片段的ID。并具有一个侧面导航栏，可通过链接浏览片段。

我试过路由器anchorScroll只需添加这对模块无所事事的我。它只是为您提供URL中的片段，但没有滚动。

我已经尝试过viewportScroller。这样做的主要问题是它第一次无法使用（例如：如果您一直在同一页面上并重复该过程，则将您重定向到具有所需片段的静态页面，但滚动不会发生） ，如果您单击导航栏旁边具有与您访问的URL相同的URL的链接，则它起作用： ([foo]/[bar]#[fragment])由于导航没有更改，它也不起作用。

用于路由器的其他选项：

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

ps .： useHash：true不会改变。

ngOnInit中的viewportScroller：

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

没有滚动到片段的最简单方法是什么！！！使用这个：

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

b / c每次都能使用，但不是TS，因为我们在公司的项目中使用TS。

请帮帮我