角事件发射器不工作

Question

在Angular 5中，我有多个组件，例如一个是标题组件，另一个是设置组件，第三个是日历组件。

当我从设置向标题组件发出事件时，它可以工作，但是当我转到日历链接时，它会生成如下所示的错误

错误：StaticInjectorError(AppModule)[HeaderComponent -> TodoComponent]：StaticInjectorError（平台：核心）[HeaderComponent -> TodoComponent]:

此处的代码示例

Header.component.ts 文件

import { Component, OnInit } from '@angular/core';
import {TodoComponent} from '../todo/todo.component';
@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {

  constructor(public todo:TodoComponent) {

    this.todo.change_company_logo.subscribe(data=>{
      console.log(data);
    })
   }

  ngOnInit() {
  }

}

Todo.component.ts 文件

import { Component, OnInit,Output,EventEmitter} from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})

export class TodoComponent implements OnInit {
  @Output() change_company_logo: EventEmitter<any> = new EventEmitter<any>();
  constructor() {

   }

  ngOnInit() {
  }
  fire(){
    this.change_company_logo.emit("hi");
  }
}

kanban.component.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-kanban',
  templateUrl: './kanban.component.html',
  styleUrls: ['./kanban.component.css']
})

export class KanbanComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

route.ts 文件

import { ModuleWithProviders } from "@angular/compiler/src/core";
import { RouterModule } from '@angular/router';
import { Routes, Params } from '@angular/router';
import {TodoComponent} from './todo/todo.component'
import {KanbanComponent} from './kanban/kanban.component';

const appRoutes:Routes = [
    {path:'',component:TodoComponent},
    {path:'kanban',component:KanbanComponent}
];
export const routing:ModuleWithProviders = RouterModule.forRoot(appRoutes);

第一次默认组件是 todo.component.ts 并且有一个按钮可以向标题组件触发事件，当转到看板链接时它会在此代码上方定义的控制台中给出错误。

请指教。

Answer 1

您正在尝试使用构造函数在另一个组件中注入一个组件，在 Angular 中，您可以注入一个注释为 @Injectable 的服务。组件通信请参考here。

Answer 2

@Output() change_company_logo: EventEmitter = new EventEmitter();

可以这样

@Output() change_company_logo = new EventEmitter();

还有这个：

ngOnInit() {}
fire(){ this.change_company_logo.emit("hi"); }

到

ngOnInit() { this.fire(); }
fire(){ this.change_company_logo.emit("hi"); }

你忘了叫火，你定义了它但没有叫它