标签: angular-router

我的路由是

{
path:'contacts/:id',
component: contactDetail
}

在

canActivateChild( route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) { 
  console.log(state.url); 
}

state.url返回/contacts/1我需要的是匹配的url/contact/:id是否有可能获得匹配的url？

我通常在我的应用程序的路线上使用这种方式。

ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');

  this.hero$ = this.service.getHero(id);
}

但在上面的文档中我也可以看到基于 Observable 的方法。

ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')))
  );
}

你能告诉我为什么我们需要这种方法吗？医生这样说

使用此技术您只能获得参数映射的初始值。如果路由器有可能重用该组件，请坚持使用可观察的 paramMap 方法。

但我不清楚。你能告诉我为什么我们需要基于 Observable 的方法吗？

对我来说使用嵌套路由的原因是动态处理每个页面的图标和后退按钮。我有抽象路由，因为当我单击后退按钮时，路由参数消失，我放置一个抽象路径来保留id并questionnaire在 url 中键入参数。我的抽象路径是Questionaire

 { path: 'Home', component: HomeComponent,data:{icon:'fa-home'} },
 { path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:'/Home'} },
 { 
      path: 'Questionaire/:questionnaireType/:id',
      children:[ 
      { path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'} },
      { path: 'UpdateQuestionnaire', component: EditComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'QuestionList', component: QuestionListComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'ImportQuestion',    component: ImportQuestionComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'}  },
      { path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:'/QuestionaireList'} },
      { path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:'/MetaContentList'}},
    ]}

另外，在questionnaire.list.html我通过 routerlink 链接到每条路径时，下面是我的链接：

[routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']"

这是我的链接：

 <a  class="primary small ui icon button" [routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']" >
                <i class="edit   icon"></i>
              </a>

我预计当我点击链接时我会路由到这个地址： …

我想创建一个嵌套的路由movies/:id但是，使用我当前的配置，当用户导航到movies/1父组件时，始终会呈现。我需要MovieDetailComponent在movies/1url 上渲染。这是我的配置：

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView,
    children: [{
      path: ':id',
      component: MovieDetailComponent
    }]
  },
  {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

我尝试过先添加pathMatch: 'full'到父组件，然后添加到子组件，然后再添加。当我添加pathMach: 'full'到父组件时，子URL甚至都不会被点击；当我将pathMatch: 'full'just 添加到子组件时，即使URL为，也只会呈现父组件。/movies/:id为什么会这样？

当我将子路径移动到其自己的路径中时（未嵌套），该组件将正确呈现。

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView
  },
  {
    path: …

我对ionic 4项目使用了角路由（@ angular / router）以禁用ionic 4中的设备后退按钮prevent-default不起作用，下面是我的代码

app.component.ts

    this.platform.backButton.subscribe(() => {
        if (this.router.url === '/Login') {
          this.util.presentAppExitAlert();
        } else {
          // event.preventDefault();
          console.log("invoing url ", this.router.url);
        }
      });
    });

我无法在此处禁用设备后退按钮的任何帮助

我有一些这样的链接

<li routerLinkActive="active" class="nav-item">
<a [routerLink]="['contracts']" 
[queryParams]="{ activeOnly: false }" 
class="nav-link">Contracts</a>
</li>

你在参数中看到我有？activeOnly=false，当我的网址像这样时，使用这种方法一切都可以

Contracts?activeOnly=false 在 html 中添加活动 css 类，用户可以看到它是活动链接

我遇到的问题是，有时 url 可以像这样的 contracts?activeOnly=true&id=1一样更改，然后active css 不再适用。

我需要的是在元素上有活动的 css 类，即使 url 已随查询参数更改。

示例如果 url 是这样的contracts?activeOnly=true&id=1

活动CSS 类也必须保留在LI html 标签上

我正在尝试使用 Angular 创建一个网站，其中包含许多文章，每当我按下一篇文章时，它就会使用路由转到一个新的 URL。

为此，我创建了一个新的文章组件，我的app-routing.module.ts看起来像这样

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'about', component: AboutComponent },
  { path: 'article1', component: ArticlesComponent },
  { path: 'article2', component: ArticlesComponent },
  { path: 'article3', component: ArticlesComponent },
  { path: 'article4', component: ArticlesComponent },
  { path: 'article5', component: ArticlesComponent },
  { path: 'article6', component: ArticlesComponent },
];

我将所有内容路由到同一个组件，因为我不想为每篇文章创建一个新组件。如何根据用户对一篇文章的点击在此组件上显示不同的数据？

我正在使用Angular 9。我需要在导航开始后立即知道哪个将是目标网址。我想做这样的事情：

constructor(router: Router) {
    this.router = router;
}

this.router.events.pipe(
    filter(event => event instanceOf NavigationStart),
    map(event => {
        //get somehow the destination url of this navigation just started
    })
).subscribe()

有没有办法只使用 Angular Router来实现这一点？

我在 angular 11 中遇到了这个错误，但我尝试应用我在网上找到的所有修复程序......

错误 ：

错误：src/app/app.component.html:1:1 - 错误 NG8001：'router-outlet' 不是已知元素：如果 'router-outlet' 是一个 Angular 组件，则验证它是否是该模块的一部分

应用程序组件.html

   <router-outlet></router-outlet>

app.module.ts

@NgModule({
  imports: [
    AppRoutingModule,
    AppStoreModule,
    BrowserModule,
    BrowserAnimationsModule,
    EffectsModule.forRoot(),
    HttpClientModule,
    AngularSvgIconModule.forRoot(),
    NgbModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApolloInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: true,
      }),
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [Sentry.TraceService],
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.routing.ts

import { …

我正在使用Angular 5开发Web应用程序.我是Angular with Typescript的新手.现在我正在为我的应用程序模块配置路由.但它不起作用并抛出错误.

这是我的index.html档案

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <router-outlet></router-outlet>
</body>
</html>

我在app-routing.module.tsapp文件夹下创建了一个文件.

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AppComponent } from './app.component';


    const routes: Routes = [ 
        { path: '', loadChildren: './web/web.module#WebModule' },
    ];

    @NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule {}


Import that routing class in …