Question

在我的Angular服务中，我有一个方法，我可以在分页中获取下一个项目的逻辑。如果我在分页按钮上单击下一步，此方法将返回我将导航的页面的名称。

因为我在这个方法中做了逻辑，所以从这里我需要活动类，在侧边栏组件中实现它。在侧边栏中，我必须将活动URL设置为mach我的链接，并使用css使其变为颜色。

我服务中的导航方法

private _pages = [
{name: '/page1', index: 0}, 
{name: '/page2', index: 1}, 
{name: '/page3', index: 2}
];    

public activeClass;
private _current = null;

public getCurrent() {
    return this._current;
}

public navigate(action: string) {
    if (typeof this.ACTIONS[action] === 'undefined')
      return;

    let shift = this.ACTIONS[action];
    this.setCurrent(shift);

    const curr = this.getCurrent();
    this.activeClass = 'done-' + curr.index;
    return this.router.navigate([curr.name]);
}

在我的侧边栏中我注入了服务，在ts文件中我想从我的服务中获取activeClass，如下所示：

public activeClasss() { 
    this.activeClass = this.PrevNextService.activeClass;
  }

并在侧边栏html中使用它：

<div class="list-group-wrapper" [ngClass]="activeClasss()">

当然我做了一些SASS规则，用for循环来处理每个类。

我的问题是我无法以上面提到的方式从我的服务中获取activeClass，因为我收到错误。我不能在我的navigate（）之外从Service声明这个activeClass，因为在navigate（）中我创建了一个逻辑，当我使用它时，我可以看到当前的url。

这样才能得到这个

this.activeClass = 'done-' + curr.index;

从我的Service方法

并使用侧边栏ts文件？

Answer 1

您的代码有什么问题？在HTML中，您使用函数：

<div class="list-group-wrapper" [ngClass]="activeClasss()">

但该功能不会返回任何内容

public activeClasss() { 
    this.activeClass = this.PrevNextService.activeClass;
}

在模板组件变量中使用或从函数返回一些内容。您的代码应该正常工作......

如何使用Angular Service中的变量

1 个答案: