Question

我在Angular 5 / Angular Materials应用程序中使用此导航：

<!-- Navigation -->
<mat-toolbar color="warn">  
<mat-toolbar-row>
  <span class="nav-icon">
    My Icon
  </span>

  <span class="nav-spacer"></span>

  <button mat-button [routerLink]="['/home']">Home</button> 
  <button mat-button [routerLink]="['/login']">Login</button>
  <button mat-button (click)="logout()">Logout</button>
 </mat-toolbar-row>
</mat-toolbar>

<!-- Router Outlet -->
<router-outlet></router-outlet>

实际上我找不到如何将活动菜单按钮设置为活动状态。有没有办法做到这一点，例如与路线？

Answer 1

在Angular 6中，您可以将routerLinkActive属性添加到按钮。当相应的路由是当前路由时，该属性的内容将被添加到元素的css类中。

例如：

<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
    Home
</button>

单击此按钮并且相应的路线成为活动路径时，它将获得额外的mat-accent CSS类。

参考：Angular.io docs，Angular API docs

Answer 2

希望这对我使用的 Angular 版本 12.0.5 不适合我的人有所帮助

我替换了：

public MainPage()
{
    this.InitializeComponent();

    this.DataContext = this;
 
    DataTemplate itmeTemplate = (DataTemplate)XamlReader.Load(
       @"<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
       <Button Command='{Binding DataContext.BtnClickCommand, ElementName=TestListView}' Content='Editor' />
       </DataTemplate>");
    TestListView.ItemTemplate = itmeTemplate;

    NumbersList = new ObservableCollection<Item>();
    for (int i = 0; i < 50; i++)
    {
        var item = new Item ();
        NumbersList.Add(item);
    }
    TestListView.ItemsSource = NumbersList;
}

public ICommand BtnClickCommand
{
    get
    {
        return new RelayCommand(async () =>
        {
        });
    }
}

与：

<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>

CSS：

<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>

这解决了我的活动按钮问题。

角度材质 - 设置按钮激活

2 个答案: