Question

在Angular项目中，我使用一个组件创建锚列表，并且创建了一个组件，以在单击每个锚时通过不同的URL转到不同的JSON对象。我需要创建两种类型的链接：“ myapp / category”和“ myapp / category / sub-category”

这是代码

list.component.html：

<div class="container">
   <div class="row">
          <dl *ngFor="let post of _postsArray">
            <dt *ngIf="post.parent_id=='0';then m"></dt>
            <ng-template #m><dt><a routerLink="{{post.name}}" routerLinkActive="active">{{post.name}}</a></dt>
                <dl *ngFor="let sub of _postsArray">
                <dt *ngIf="sub.parent_id==post.id;then s"></dt>
                <ng-template #s><dd><a routerLink="{{post.name}}/{{sub.name}}" routerLinkActive="active">{{sub.name}}</a></dd></ng-template>
                </dl>
            </ng-template>
          </dl>
   </div>
</div>

app.module.ts：

const appRoutes: Routes = [
  { path: 'explore-all-item', component: AllItemsComponent },
  { path: 'search', component: SearchResultComponent },
  { path: ':post.name', component: FilterComponent },
  { path: ':post.name/sub.name', component: FilterSubComponent },
  { path: '', redirectTo: '/explore-all-item', pathMatch: 'full' }
    ];

filter.component.ts：

  cat;
  temp;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {

  this.route.params.subscribe((params:any) => {this.temp = 'http://myapp/'+params["post.name"]; this.ngOnInit()})

  }

filter-sub.component.ts：

    cat;
    temp;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {
    this.route.params.subscribe((params:any) => {this.temp = 'http://myapp/'+params["post.name"]+'/'+params[sub.name]; this.ngOnInit()})
   }

过滤器组件用于post.name路由，因此我可以将url设置为类似“ myapp / post.name”的类别格式，并且可以正常工作。并且filter-sub组件用于post.name/sub.name路由，因此我可以将url设置为类别/子类别格式，例如-“ myapp / post.name / sub.name”，这是行不通的。控制台显示“无法匹配任何路由”。我该如何处理？

Answer 1

首先，如果路线具有公共路径，则它们应该是彼此的子级。接下来，您在路线中忘记了:，这意味着您只能访问xxx/xxx/sub.name。

{ path: ':post.name', component: FilterComponent, children: [
  { path: ':sub.name', component: FilterSubComponent },
]},

此外，如果编写routerLinks，则应输入符号，而不是插值。

[routerLink]="[post.name]"

自定义路线在Angular中不起作用

1 个答案: