标签: angular-router

我想创建一个子元素来触发它自己的点击，并且不响应具有 [routerLink] 的父元素，问题是子元素无法delete()在其中运行它的功能(click)="delete()"，只需跟随它的父元素[routerLink]（它导航到/产品/：id）

    <div class="item">

<!-- parent element -->
    <a [routerLink]="['/product/'+product.id]">
        <div class="figure">
          <div class="sides">
            <div class="side">
              <div class="card">
<img class="img" [src]="product.thumb"> 
                <div class="content">
                  <div class="header">{{product.name}}</div>
                  <div class="meta"> <span>product.category</span> </div>
                </div>
                <div class="extraContent"> <span class="ui right floated black">

                <!-- child element -->
                <a (click)="delete()" ><i class="red trash outline icon"></i></a></span> <span><i class="deleteProductIcon"></i></span> </div> 
                <!-- child element -->

              </div>
            </div>
          </div>
        </div>
      </a>
<!-- parent element -->

</div>

我尝试移动[routerLink]到鞋面div，但它仍然做同样的行为

我正在为我的网站创建一个管理界面，我可以在其中撰写文章。在编辑器中，我可以创建最终在文章的 HTML 代码中作为 [href] 的链接。

当我加载一篇文章并将其内容插入页面时，链接仍然使用 href（应该如此），但这意味着即使是内部链接也会重新加载整个页面并且不使用 Angular 路由器。

我如何“编译”动态内容来告诉 Angular 将“href”转换为“routerLink”？

出于好奇，我尝试将ActivatedRoute的 param 分配给定义为数字的变量：

public id: number;

constructor(public activatedRoute: ActivatedRouter) {}

public ngOnInit() {
    this.activatedRoute.params.take(1).subscribe((params) => {
        this.id = params['id']; // I was expecting to see a warning here
    }
}

...并且它在我的 IDE 和 tslint 中没有任何警告地通过了。所以我深入研究它并发现它发出声明的参数（此处）以包含any元素：

export type Params = {
  [key: string]: any
};

问题是为什么？AFAIK 所有参数始终是字符串。有没有办法让 Angular 知道我们的一些参数应该是numberorarray并且它会解析它？

在 Angular 中，我必须处理以下格式的路线

/sections/{id}?filter={filter}

即我有一个路由参数（id）和一个查询参数（filter）。两个参数都是可选的，因此所有这些路由都是有效的并且正在被监听

/sections/{id}?filter={filter}
/sections?filter={filter}
/sections/{id}
/sections

处理路线时，我需要调用可能昂贵的服务，并提供给定的参数。我可以订阅路由的params和queryParams，但我只想在每次 url 更改时调用该服务一次，从而避免任何不必要的调用。

问题是，当从 移动/sections/1?filter=active到时/sections/2，两个可观察量都会触发，而我无法控制哪个将首先触发。另一方面，当从/sections/1?filter=active到/sections/1或从移动/sections/1?filter=active到时/sections/2?filter=active，只会触发一个。

有没有什么明智的方法可以知道最后一次订阅何时触发，以便我可以避免发送不需要的服务器调用？

到目前为止的测试代码看起来像这样：

constructor(private activeRoute: ActivatedRoute, private dataService: dataService) {

    this.activeRoute.paramMap.subscribe((params: ParamMap) => {
        console.log("triggering route params subscription");
        this.section = params.get("id");
        this.dataService.runSlowQuery(this.section, this.filter);
    });

    this.activeRoute.queryParamMap.subscribe((queryParams: ParamMap) => {
        console.log("triggering query params subscription");
        this.filter = queryParams.get("filter");
        this.dataService.runSlowQuery(this.section, this.filter);
    });
}

在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线。例如，他们可能从 导航/page/1到/page/2。

我希望这个导航能够触发路由动画，但它没有。如何使路由器动画在这两条路线之间发生？

（我已经明白，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent。解决方案是否改变此行为对我来说并不重要。）

这是一个重现我的问题的最小应用程序。

我想将 Angular Material 标签https://material.angular.io/components/tabs与标签中的路由器导航一起使用。

我尝试<nav mat-tab-nav-bar>按照文档中的说明使用，我找到了本教程：https : //nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/ 在那里我可以找到这样的模板：

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of navLinks"
    [routerLink]="link.link"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

但问题是，我的选项卡不在我的应用程序的根目录中，而是在子路径的子模块中。我有这样的事情：

在应用路由模块中：

const routes: Routes = [
  ...
  { path: 'subpath', loadChildren: () => import('./path-to-module/submodule.module').then(m => m.SubmoduleModule) },
  ...
];

在 submodule-routing-module 我应该有这样的东西：

const routes: Routes = [
  { path: '', component: FirstTabComponent },
  { path: 'tab2', component: SecondTabComponent },
]

我想要的是，如果我转到 url，/subpath我会看到选择了第一个选项卡的选项卡，如果我转到 url，/subpath/tab2我会看到选择了第二个选项卡的选项卡。

知道怎么做吗？

角度 RouteReuseStrategy 滚动位置错误。

当我从另一个页面返回列表页面时，滚动条回到顶部

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

export class SystemRouteReuseStrategy implements RouteReuseStrategy {

  handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.data.reuse) {
      return true;
    }
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.routeConfig.path] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.handlers[route.routeConfig.path]; 
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

}

这可能是一个常见问题，如果有更好的答案，请指点我。话虽如此，问题来了：

在顶层，我正在开发的 angular 应用程序公开了一个登录路径和 4 个独立仪表板的路径，具体取决于谁登录。这部分按预期工作。

对于每个仪表板，我都有一个大致相同的侧面导航（某些选项仅针对某些类型的用户显示）。在仪表板中，我有一个嵌套的路由器插座。每当我尝试在嵌套插座内加载模块时，Angular 都无法匹配路径。这是我到目前为止所拥有的：

app-routing.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'login', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule) },
  //{ path: 'dashboard', loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule) }
  { path: 'admin', loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule) },
];

admin-routing.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', component: AdminComponent, children: [
    { path: 'employee', loadChildren: () => import('./../employee/employee.module').then(m => m.EmployeeModule) },
    { path: …

我试图在导航中突出显示您滚动过去的活动片段。

将片段和导航添加到片段很简单并且效果很好，例如：

      class="nav-button unselectable"
      matRipple
      routerLink="/"
      fragment="features"
      [ngClass]="{ 'nav-active': (active_fragment | async) === 'features' }"

但是路由器显然不知道你在滚动哪个元素，所以我试图监听滚动事件并使用 Y 位置检查最近的元素。

但是我的登陆页面不是我的导航的子页面，所以 viewchild 不起作用，例如：

导航组件：

  @ViewChild('features', { static: false })
  private _features: ElementRef;

  @HostListener('window:scroll', ['$event'])
  private _update_active_fragment(event: any) {
    event.preventDefault();

    console.log(window.pageYOffset);
    console.log(this._features.nativeElement);
  }

登陆页面组件：

  <app-features #features id="features"></app-features>

但是特性原生元素是未定义的。

我的问题是：

• 我还能如何实现此功能？
• 如何从导航组件获取元素引用？
• 如何获取导航组件中 features 元素的 y 位置？

在延迟加载模块中创建第二个路由器插座时，我遇到了问题。