Question

我有一个Angular应用程序，其中我的主应用程序组件包含一个导航栏，该导航栏使用routerLink指令链接到其他组件。非常简化，看起来像这样：

<nav>
    <button [routerLink]="['/foo']>
        Foo
    </button>
    <button id="button_to_change" [routerLink]="['/bar']>
        Button whose functionality I'd like to change
    </button>
</nav>
<div [@routeAnimation]='prepRouteState(routerOutlet)'>
    <router-outlet #routerOutlet="outlet"></router-outlet>
</div>

在一个组件中（比如上面示例中将导航到的foo组件），我想更改仅针对该组件的第二个按钮bar的功能。有什么方法可以在打字稿组件代码中以编程方式执行此操作吗？例如，对于该组件，我可以更改bar路由的位置吗？

提前致谢

Answer 1

使用(click)="barClicked()"代替[routerLink]="['/bar']进行动态操作

Answer 2

您可以订阅路由器事件以检查加载了哪个组件，然后将您的逻辑显示为隐藏显示每个按钮。

在导航栏组件中

class Navbar {
  showButton:boolean=false;
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        console.log(val instanceof NavigationEnd)
        if (event instanceof NavigationStart) {
          if(event.url === "yourcomponentroute"){
             this.showButton=true
          }
        }
    });
  }
}

Navbar html可以像

<nav>
    <button [routerLink]="['/foo']>
        Foo
    </button>
    <button *ngIf="!showButton" id="button_to_change" [routerLink]="['/bar']>
        Button for other components
    </button>
    <button *ngIf="showButton" id="button_to_change" [routerLink]="['/bar']>
        Button for foo component
    </button>
</nav>

Answer 3

另一种方法是使用* ngIf + getter和服务来存储页面

您的服务

@Injectable()
export class NavService {
    pagina:string
}

您的nav.component

<nav>
    <button [routerLink]="['/foo']>
        Foo
    </button>
    <button *ngIf="pagina=='uno' [routerLink]="['/uno']>
        Uno
    </button>
    <button *ngIf="pagina=='dos' [routerLink]="['/dos']>
        Dos
    </button>
</nav>

export class NavComponent {
   get pagina()
   {
       return this.navService.pagina
   }
   constructor(private navService:NavService){}
}

您的组件

export class UnoComponent implements onInit {
   set pagina(value)
   {
        this.navService.pagina=value;
   }
   constructor(private navService:NavService){}
   ngOnInit(){
       pagina="uno";
   }
}

Navbar根据页面

3 个答案: