zoukankan      html  css  js  c++  java
  • [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

    You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.

    See Doc

    app.component.ts:

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app works!';
    }

    app.component.css:

    a{
      text-decoration: none;
    }
    
    a.active{
      font-weight: bold;
      color: darkred;
    }

    app.component.html:

    <nav>
      <a [routerLink]="''"
         routerLinkActive="active"
         [routerLinkActiveOptions]="{exact: true}">Home</a>
      <a
        [routerLink]="'contact'"
        routerLinkActive="active"
      >Contact</a>
    </nav>
    <router-outlet></router-outlet>

    Github

  • 相关阅读:
    [洛谷P5408]第一类斯特林数·行
    11 React 组件生命周期
    10 React 组件 API
    9 React 列表 & Keys
    8 React 条件渲染
    7 React 事件处理
    6 React Props
    5 React State(状态)
    4 React 组件
    3 JSX语法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5907095.html
Copyright © 2011-2022 走看看