angular - 为什么我的 Angular 服务变量未定义？

Question

我一直试图在我的代码中从一个组件到另一个组件获取一个变量，但它返回未定义

我的服务

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

@Injectable({
  providedIn: 'root'
})
export class ColorService {

  public color : string;

  constructor() { }
}

我的应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { RouterModule, Routes } from '@angular/router';

import { ColorService } from './core/color.service';

import { UserComponent } from './user/user.component';
import { PublicComponent } from './public/public.component';

const routes : Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full'
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'public',
    component: PublicComponent
  },
  {
    path: '**',
    redirectTo: 'user'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    PublicComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    ColorService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的用户组件

import { Component, OnInit } from '@angular/core';
import { ColorService } from '../core/color.service';

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

  constructor(private color: ColorService) { }

  ngOnInit(): void {

  }

  colorit(){
    this.color.color = 'blue';
    console.log(this.color.color);
  }

}

以及应该获取颜色字符串的组件

import { Component, OnInit } from '@angular/core';
import { ColorService } from '../core/color.service';

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

  constructor(private color: ColorService) { }

  ngOnInit(): void {

  }

  getColor(){
    console.log(this.color.color);
  }
}

然而，每次我尝试在公共(public)组件中获取颜色时，我都会得到一个未定义的，甚至是包含在 appModule 的提供程序中的

Answer 1

对于从一个组件到另一个组件的通信，我们可以使用@Input 和@Output 发射器属性。

您可以在 PublicComponent.ts 文件中更新您的代码，如下所示:

import { Component, OnInit, Input } from '@angular/core';
import { ColorService } from '../core/color.service';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.scss']
})
export class PublicComponent implements OnInit {
  private _color = '';

  constructor(private color: ColorService) { }

  ngOnInit(): void {}

  @Input()
  set color(color: string) {
     this._color = color || '<no name set>';
  }

  getColor(){
    console.log(this.color.color);
  }
}

此外，在 PublicComponent.html 文件中添加以下代码行:

<app-public [color]="color.color"></app-public>

请进行以下更改，并让我知道它是否适合您。