Question

我是Angular的新手，请帮助。

我有两个组件。.一个用于索引，一个用于导航。

对于索引组件，存在子组件，这些子组件会通过变量productDivision的值进行更改。因此，如果productDivision = 1，子组件（A）将显示在索引中，如果productDivision = 2，则将显示（B）子组件，而不是（A）。

所以我需要的是...如果单击导航栏上的一个元素，我希望prodDivision的值更改..以在索引中显示不同的子组件那么如何从HTML中获取prodDivision变量的新值并将其分配给Typescript作为变量prodDivision的新值？

导航栏组件：html：

<nav id="nav-icons">
    <a class="nav-icon-home" (click)="prodDivision === null; detectProductDivision() " routerLink="/">
      <span class="nav-icon"></span><br />
      Telefon
    </a>
    <a class="nav-icon-mobile" (click)="prodDivision === 1 ;detectProductDivision()" routerLink="/" >
      <span class="nav-icon"></span><br />
      Mobil
    </a>

    <a class="nav-icon-phone" (click)="prodDivision === 2; detectProductDivision()" routerLink="/">
      <span class="nav-icon"></span><br />
      Fax
    </a>

navbar.ts

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

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

         public prodDivision: number;
        @Output() public navbarEmitter = new EventEmitter();
      constructor() { }
        detectProductDivision() {
            this.navbarEmitter.emit(this.prodDivision);
        }

      ngOnInit() {
      }
    }
    }

Answer 1

您可以使用服务来保持任意数量的组件之间的通信

我已根据您的需要进行了演示，请登录stackblitz

2个组件之间的通讯

1 个答案: