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

但是，每次我尝试在公共组件中获取颜色时，我都会得到不确定的信息，甚至更难将其包含在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>

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

Answer 2

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

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

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

2 个答案: