Question

我有这段代码，用于输出给定部分当前范围内的页面列表。我正在尝试获取当前活动页面的li（节标题）以在给定页面上显示活动状态。我还没有找到答案，我是Angular2的新手。任何帮助，将不胜感激。谢谢。

<div class="col-12 d-flex justify-content-center align-items-center">
  <ul class="child-ul-nav" *ngIf="page.layout === 'page' && page.sections">
    <li class="child-li-nav" *ngFor="let section of page.sections">
      {{section.title}}
    </li>
  </ul>
</div>

Answer 1

我将（section.id === page.id）添加到了[class.active]

 <ul class="child-ul-nav" *ngIf="parentPage && parentPage.layout === 'page' && parentPage.sections">
      <li class="child-li-nav" *ngFor="let section of parentPage.sections">
        <span [class.active]="section.id === page.id">{{section.title}}</span>
      </li>
    </ul>

Answer 2

You can do this by inserting a property 'URL' in each object of parentPage.sections array which corresponds to the Url the page a goes after clicking the li i.e

parentPage.sections = [{
'title': 'sample title1',
'url': '/url/suburl1',
....
},{
'title': 'sample title2',
'url': '/url/suburl2',
....
}];

you will get the URLs from routes property in angular-router you have configured in app.module.ts or lazyLoaded.module.ts if you have done lazy loading

next thing you will get the current URL from 'Router' class, assigning the current URL to the local variable of the component i.e


**In .ts**

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

**In .html**

<div class="col-12 d-flex justify-content-center align-items-center">
  <ul class="child-ul-nav" *ngIf="page.layout === 'page' && page.sections">
    <li class="child-li-nav" [ngClass]="currentUrl === section.url ?'active-li':''" *ngFor="let section of page.sections">
      {{section.title}}
    </li>
  </ul>
</div>

li on page init上的活动状态

2 个答案: