Angular 6 - 传递变量值

Question

是否有任何选项可以仅将 Component1 中保存的一个变量的值传递给 Component2 中的变量而不进行任何模板绑定？

我有组件 Header 和 Footer，并且在 header 中有一个布尔变量 test，我需要将变量 TEST 的值传递给 Footer 组件中的变量 TEST2。

我正在寻找一些带有 @Input 的解决方案，但我没有找到任何没有模板绑定的解决方案，如 [test]="test"

简而言之，我只需要将值从一个 .ts 文件传递​​到另一个 .ts 文件。

我在关注这个例子：Pass data to nth level child component in Angular 4

但是变量仍然没有传递给组件

HeaderService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class HeaderService {
    getTheme: boolean;
}

HeaderComponent.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { SideBarService } from '../sidebar/sidebar.service';
import { googleMapConfig } from '../content/google-map/config.service';
import { HeaderService } from './header.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

export class HeaderComponent implements OnInit {

  Name = 'Menučkáreň';
  Navigation = 'Navigácia';
  nightTheme;

  icons = ['favorites','notification_important'];
  tooltip = ['Obľúbené položky','Zoznam zmien'];

  constructor(
    public sideBarService: SideBarService,
    public mapService: googleMapConfig,
    private headerService: HeaderService
  ) { }

public toggle() {
  this.sideBarService.toggle.emit();
}

public changeDark() {
  this.nightTheme = true;
  this.headerService.getTheme = true;
  this.mapService.changeDark.emit();
}

public changeLight() {
  this.nightTheme = false;
  this.headerService.getTheme = false;
  this.mapService.changeLight.emit();
}

  ngOnInit() { }

}

页脚组件

import { Component } from '@angular/core';
import { HeaderService } from '../header/header.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
  providers: [HeaderService]
})
export class FooterComponent {

  Copyright = 'Copyright 2018 | Vytvoril Patrik Spišák';
  Version = '0.0.1';
  nightTheme: boolean;

  constructor(private headerService: HeaderService) {

    this.nightTheme = this.headerService.getTheme;

   }

}

所以当我从 HeaderComponent.html 调用我的函数 changeDark() 时，它不会触发 this.headerService.getTheme = true;

 <mat-grid-tile>
              <button (click)="this.changeDark($event)" mat-icon-button>
                <mat-icon aria-label="Nočný režim">brightness_3</mat-icon>
              </button>
          </mat-grid-tile>

更新

所以我能够通过这段代码实现我所需要的：问题在于在 FooterComponent 中声明的提供程序。虽然在 FootersComponent 中声明了提供程序，但我得到了未定义，当我删除它们并仅在 app.modules.ts 变量中保留提供程序时，已正确设置和读取。

HeaderService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class HeaderService {
    nightTheme:boolean;

    get data():boolean{
        return this.nightTheme;
    }

    set data(value:boolean){
        this.nightTheme = value;
    }

constructor(){}
}

标题组件

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { SideBarService } from '../sidebar/sidebar.service';
import { googleMapConfig } from '../content/google-map/config.service';
import { HeaderService } from './header.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

export class HeaderComponent implements OnInit {

  Name = 'Menučkáreň';
  Navigation = 'Navigácia';

  icons = ['favorites','notification_important'];
  tooltip = ['Obľúbené položky','Zoznam zmien'];

  constructor(
    public sideBarService: SideBarService,
    public mapService: googleMapConfig,
    private headerService: HeaderService
  ) {}

public toggle() {
  this.sideBarService.toggle.emit();
}

public changeDark() {
  this.headerService.nightTheme = true;
  console.log(this.headerService.nightTheme);
  this.mapService.changeDark.emit();
}

public changeLight() {
  this.headerService.nightTheme = false;
  console.log(this.headerService.nightTheme);
  this.mapService.changeLight.emit();
}

  ngOnInit() { }

}

页脚组件

import { Component, OnInit } from '@angular/core';
import { HeaderService } from '../header/header.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {

  Copyright = 'Copyright 2018 | Vytvoril Patrik Spišák';
  Version = '0.0.1';

  constructor(private headerService: HeaderService) { }

  ngOnInit() {
    console.log('FOOTER:'+this.headerService.nightTheme);
  }
  
}

Answer 1

您可以使用一个服务来存储变量并且组件可以从中访问它。更多关于这里的服务：https://angular.io/tutorial/toh-pt4

Answer 2

看看官方angular documentation - 父母和孩子通过服务进行交流。这个想法是创建一个具有一些 RxJS Subject 属性的服务。您的组件将注入此服务并使用这些Subjects - 它们可以相互交互。为什么Subject？因为您可以同时订阅和发出值。有关更多信息 - 请查看有关 understanding subjects 的这篇文章。

如果您不熟悉 RxJS 主题，作为一种解决方法（但这不是一个好的解决方案） - 您可以通过更改其属性来共享同一服务的值。但在这种情况下，如果有任何更改，您的组件将无法收到通知。这就是为什么主题是通过服务进行组件交互的理想候选者。

Answer 3

您可以使用 Angular 服务在您的组件之间共享您的公共数据。请看我的回答

Pass data to nth level child component in Angular 4

另外一个选项是 RxJs ，你可以通过 Observable 与一些孤立的组件进行通信

Angular 6 communication between component and a directive

Answer 4

更新

@PatrikSpišák，当您使用 getter 时，应用程序中的任何更改都会强制 Angular “重新计算”该值。 “提示”是您只有一个变量（该变量是服务中定义的变量）。制作一个 getter 使您可以在组件的 .html 中使用“getter”。您可以使用 getter 对组件的其他变量进行任何更改

更新 2（更正了变量的名称）

您的页脚组件。 footer 需要知道 getTheme 的值

constructor(private headerService: HeaderService) 
get getTheme()
{
    return this.headerService.getTheme;
}

你的 header 组件，header 需要知道 nightTheme 的值并且可以改变

constructor(private headerService: HeaderService) 
get getTheme()
{
    return this.headerService.getTheme;
}
set getTheme(value)
{
    this.headerService.getTheme=value;
}
//You can do anywhere
this.getTheme=true

您的服务标头服务

getTheme:any;
constructor(){}

headerService 中只有一个变量 getTheme（等同于您可以使用另一个变量）。看到你的代码我想你想提到“nightTheme”