angular - 从其他组件Angular 10的按钮添加不同的类

问题描述

我正在尝试从其他组件的三个按钮向 div 添加类。当我在同一个组件中时，它可以正常工作，问题是当 div 在一个组件中而按钮在另一个组件中时。

导航栏组件：

<nav class="c-navbar" aria-label="Navegacion principal">
    <ul class="c-navbar__list">
        <li class="c-navbar__item">
            <a [routerLink]="['/one']" routerLinkActive="is-active" (click)="theme = 't-blue'" class="c-navbar__link">one</a>
        </li>
        <li class="c-navbar__item">
            <a [routerLink]="['/two']" routerLinkActive="is-active" (click)="theme = 't-red'" class="c-navbar__link">two</a>
        </li>
        <li class="c-navbar__item">
            <a [routerLink]="['/three']" routerLinkActive="is-active" (click)="theme = 't-green'" class="c-navbar__link">three</a>
        </li>
    </ul>
</nav>

应用组件：


    <div [ngClass]="theme" class="o-wrapper"> 
        <app-navbar></app-navbar>
        <router-outlet></router-outlet>
    </div>

导航栏组件 ts：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./../../../scss/components/_c-navbar.scss']
})
export class NavbarComponent implements OnInit {
theme: string

  constructor() { 
 
  }

  ngOnInit(): void {
    
  }

}

标签： angular

目前您正在尝试访问和更新导航栏组件内的主题变量，这不会更新主应用程序组件主题变量。您应该使用 Eventemittor 向应用程序组件发出一些输出，然后更新应用程序组件内的主题变量。

您可以参考以下链接了解更多使用 Eventemitters 的详细信息

https://angular.io/api/core/EventEmitter

angular - 从其他组件Angular 10的按钮添加不同的类

问题描述

解决方案

推荐阅读