angular - 从另一个组件 Angular 10 的按钮添加不同的类

Question

我正在尝试从其他组件的三个按钮向 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 {
    
  }

}

Answer 1

当前，您正在尝试访问和更新导航栏组件内的主题变量，这不会更新主应用程序组件主题变量。您应该使用 Eventemitters 向应用程序组件发出一些输出，然后更新应用程序组件内的主题变量。
您可以引用以下链接以获取更多使用 Eventemitters 的详细信息
https://angular.io/api/core/EventEmitter