标签: angular-router

我正在做一个我的小项目，以了解有关Angular的更多信息，但是我真的无法弄清楚如何实现多层路由。

我已经阅读了有关路由器组件新版本的文档，以及关于StackOverlfow的其他一些主题（第一，第二，第三），但是找不到解决方案。

让我们考虑以下应用程序结构，而不考虑Test和Test2块。

让我们考虑一下我的应用程序的组件，如下所示：

主要

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { MyAppComponent } from './my-app/my-app.component';
import { APP_ROUTER_PROVIDERS } from './my-app/my-app.routes';

bootstrap(MyAppComponent, [ APP_ROUTER_PROVIDERS ])
    .catch(err => console.error(err));

my-app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
})

export class MyAppComponent { }

my-app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

import { …

我有以下Angular Route配置

const appRoutes: Routes = [
    {
      path: '',
      component: DirectoryComponent
    },
    {
      path: 'manage/:type/:id',
      component: ManageComponent,
      outlet: 'manage',
      children: [
        {
          path: '',
          component: PreviewComponent,
          pathMatch: 'full'
        },
        {
          path: 'add/:elementType',
          component: EditComponent,
        }
      ]
    }
  ];

ManageComponent是一个沙箱组件PreviewComponent,EditComponent将在其中呈现.

用户用例重定向http://localhost:4200/#/(manage:manage/bar/12762)与预览组件匹配的用户.一切都还可以.

从PreviewComponent当上一个按钮,用户点击,我希望做一个相对导航的EditComponent有,当导航结束,http://localhost:4200/#/(manage:manage/bar/12762/add/foo)

我试过了

this.router.navigate([{outlets: {manage: ['add', 'foo']}}],{relativeTo: this.route});

和

this.router.navigate([{outlets: {manage: ['add', 'foo']}}]);

但每次,用户都被重定向到http://localhost:4200/#/add/foo.

我该怎么做这个导航？

我在Angular中使用routerLink如下

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

因此，当URL看起来像.active类时已将其添加到li标记中

/view/10?offset=0&numberOfItems=100

如果URL被更改offset或numberOfItems更改为其他值，则.active类将被删除，例如。

/view/10?offset=0&numberOfItems=120

我浏览了有角度的文档，并设法通过添加另一个routerLink使它工作，但如下所示将其隐藏。

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
    <a [routerLink]="['/view', 10]" style="display:none;">                
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

似乎以上方法有点小技巧。当路由器参数与可选查询参数一起出现时，是否可以设置任何配置以使routerLinkActive起作用？

嗨，我有一个函数可以导航到另一个页面并将 id 传递给另一个组件，但它没有向另一个组件返回任何内容。不知道我做错了什么有人可以指出我正确的方向。

gotoConsulting(questionId: number): void {   

   let navigationExtras: NavigationExtras = {
      queryParams: { 'origine': questionId.toString },
      fragment: 'anchor'
   };
  console.log("idquestion"  + questionId);
    this._router.navigateByUrl('/consulting',navigationExtras);
}

这里获得重定向但始终在视图中返回的组件无

export class PageConsulting implements OnInit {

  origine: Observable<string>;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
      this.origine = this.route
      .queryParamMap
      .map(params => params.get('origine') || 'None');
  }


}

我想在angular 4应用程序中实现动态路由.我想要做的是将新的Route对象推送到Router config.代码看起来像

@
NgModule({
declarations: [
    AppViewComponent
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'appview', component: AppViewComponent }
        { path: '**', redirectTo: 'home' }
    ])
],
providers: []})


export class AppModuleShared {
constructor(router: Router, routerModule: RouterModule) {
    console.log('Routes: ', JSON.stringify(router.config, undefined, 1));
    router.config.push({ path: 'new/random/path', component: AppViewComponent });
    router.config.forEach((x, i) => {
        console.log(`${i}: ${JSON.stringify(x, undefined, 1)}`);
    });
}}

当应用程序启动时,我想将新的Route Object推送到配置并转到构造函数中的新路径.执行构造函数后,在控制台日志中我有这样的事情:

5: {
    "path": "new/random/path"
}

看起来新的Route …

我是 Angular 2-4 的新手，现在我在用 f5 重新加载页面时遇到了问题。正如我所看到的，问题是我导航到同一条路线，因此 ngOnInit() 没有再次加载。在 ngOnInit() 是我初始化我使用的一些变量和动态表单的地方。我看到了一个可能的解决方案，即订阅路由的参数并调用一个初始化所有内容的方法。像这样的东西：

this.activeRoute.params.subscribe(
params => {
   this.paramX = params['paramX'];
   this.initializeComponent();
});

private initializeComponent() {

}

  这是正确的做法吗？这是一个好的做法还是我应该以另一种方式来做？提前致谢。

如果使用router.navigate，如何打开新的浏览器选项卡。

this.router.navigate([]).then(result => { window.location.href = link; });

我正在开发Angular Universal Application。我想创建带有自定义前缀的动态路由，但是找不到与我的案例有关的任何有用的文档。任何帮助将不胜感激...

细节：

我所拥有的是，我有4个页面，其中包含4个不同的动态URL：

• 主页（http://example.com/）
• 分类页（http://example.com/{category_name}）
• 子类别页面（http://example.com/{category_name}/{sub_category_name}）
• 产品页（http://example.com/p{product_id}-{product_name}）
• 用户页面（http://example.com/user{user_id}-{user_name}）

我做了什么

我注册了一条处理“主页”，“类别”和“子类别”页面的方法，因为它们具有相同的UI，且具有以下所述的动态类别级别，

RouterModule.forRoot([
      {path: '**', component: HomeComponent, data: {title: 'Home', description: 'Homepage - quick overview.'}}
    ])

挣扎：

现在，我无法添加产品和用户页面的路由，我无法理解，如何分别在产品页面和用户页面中的斜线之后和之前添加p和添加user前缀ids。没有这些前缀，路由工作正常。

产品和用户页面所需URL的示例

• 产品页面（http://example.com/p123-Product-Name）
• 用户页面（http://example.com/user123-用户名）

我正在使用@angular/router路由。

提前致谢。

我正在设置一个Angular 6应用程序.组件使用类似目录的结构,目录可以包含其他目录,嵌套就像它们在磁盘上一样.该组件将显示目录中的内容列表,包括文件和其他目录,如果用户单击目录,我希望应用程序嵌套一个级别,并使URL反映该级别.换句话说,我希望路由器将状态信息保存在URL中,以便用户可以使用浏览器中的后退按钮并进行其他正常导航.

我可以使用路由器模块中的以下代码完成此操作:

{ path: 'show-dir/:dir1', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3/:dir4', component: ViewDirectoryComponent }
....

但是,这是有限的,因为我手动输入每个级别,并且不希望有100个手动条目(然后限制100个嵌套目录...)

有没有更好的方法来实现这一目标？

谢谢你的帮助.

在过去的两天中，我一直在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。

请帮帮我