Question

是否可以选择仅将值从Component1中保存的一个变量传递到Component2中的变量而没有任何模板绑定的选项？

我有Header和Footer组件，并且页眉中是一个变量测试，它是布尔值，我需要在Footer组件中将变量TEST的值传递给变量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() { }

}

FooterComponent

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

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

如果您不熟悉RxJS主题，则可以使用一种变通方法（但这不是一个好的解决方案），只需更改其属性即可共享同一服务的值。但是在这种情况下，如果有任何更改，则无法通知您的组件。这就是为什么主题是通过Service进行组件交互的很好的候选人。

Answer 2

您可以使用一种存储变量的服务，组件可以从中访问它。有关以下服务的更多信息：https://angular.io/tutorial/toh-pt4

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，当您使用吸气剂时，应用程序中的任何更改都会迫使Angular“重新计算”该值。 “提示”是您仅有一个变量（该变量是服务中定义的变量）。进行吸气，使您可以在组件的.html中使用“吸气”。您可以使用getter来更改组件的其他变量

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

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

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

您的标头组件，标头需要知道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”

角度6-传递变量值

4 个答案: