为什么我的角度服务变量未定义？

Posted 2023-01-07

我一直试图在我的代码中将变量从一个组件转换为另一个组件，但它返回的是未定义的

我的服务

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);
  

但是，每次我尝试在公共组件中获取颜色时，都会得到不确定的，甚至更坚强的颜色都包含在appModule的提供程序中

答案

为了从一个组件到另一组件进行通信，我们可以使用@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>

请进行以下更改，如果适合您，请告诉我。

另一答案

在组件内部，有一个名为colorinit的方法，其中该方法未在ngoninit生命周期中声明。因此，您可以确认是否从组件html调用该方法吗？

如果不是，请在生命周期挂钩中添加该方法名称